如何在有角員工component.html上返回EmployeeCode？

Question

問題

如何在有角員工component.html上返回EmployeeCode？

樣本數據參考表

Code  tableName   FieldName   LabelText
111   Employees   EmployeeId  EmployeeCode

通話結果

GetLabelTextForEmployee('Employees','EmployeeId')

it suppose Return EmployeeCode

我使用角度為6的asp.net core 2.1 Web API進行工作。

我在Web API名稱GetReferenceFileData上創建函數以從中獲取標簽文本

數據庫並在基於參考表的employee.component.html上顯示。

這是我的功能：

[HttpGet("{tableName}/{FieldName}")]
        [Produces("text/plain")]
        public string GetReferenceFileData([FromRoute] string tableName, [FromRoute] string FieldName)
        {
          var Result =  (from h in _context.ReferenceFiles
                          where h.TableName == tableName && h.FieldName == FieldName
                          select h.LabelText).FirstOrDefault();
            if(Result==null)
            {
                Result = "Not Exist";
            }

            return (Result);


        }

上面的函數只返回一個字符串值作為標量值作為標簽

我試過的

1-關於API服務，我在下面創建函數：

GetLabelTextForEmployee(tableName:string,FieldName : string)
              {
                return this.http.get('https://localhost:44326/api/reference/' + tableName + '/' + FieldName);
              }


on employee.component.html 

//如何在此處使用函數GetLabelTextForEmployee返回EmployeeCode我根據發布的代碼制作代碼：

on employees.component.ts

    getEmployeeCode() {
       this.api.GetLabelTextForEmployee('Employees','EmployeeId')
       .subscribe( data=>{
         this.returnedData = data; //SUBSCRIBE HERE
         console.log(data);
       }); 
    }
on employees.component.html
 {{getEmployeeCode() | async}}

如下所示，我得到EmployeeCode，但處於無限循環狀態，並且不以圖像顯示形式顯示在窗體上。

Answer 1

我假設您的意思是，當您調用GetLabelTextForEmployee()時，沒有得到結果（或者，沒有得到預期的結果）？

當您使用Angular的HttpClient進行HTTP請求時， 必須訂閱該方法，否則它將永遠不會實際執行。

在employee.component.ts ，您需要調用該函數，對其進行訂閱，然后將結果分配給局部變量。 然后，您可以在模板（ employee.component.html ）中使用該局部變量。

以下假設您要在組件初始化時調用該函數，並且該函數在服務調用ApiService ，並且您的api返回一個對象。

employee.component.ts

employee: any;

constructor(private apiService: ApiService) { }

ngOnInit() { 
    this.apiService.GetLabelTextForEmployee().subscribe(result => {
          this.employee = result;
    }
}

employee.component.html

現在，在分配了局部變量的情況下，可以使用插值來顯示值。

例如

<span class="employee-code">{{employee.employeeCode}}</span>

再次，這是假設您的API返回了一個對象，您正在使用{{employee.employeeCode}}在模板中訪問該對象。

如果您的API返回一個字符串，那么您只是在插值{{employee}}

編輯

如果要直接從模板調用該函數，則仍然可以使用插值，但是由於該函數位於服務中，因此您將需要在組件中有一個函數來調用該服務。 不建議直接從模板調用服務函數。

即

employee.component.ts

getEmployeeCode() {
    return this.apiService.GetLabelTextForEmployee('Employees','EmployeeId');
}

employee.component.html

現在，您可以從模板調用getEmployeeCode()並使用async管道。

{{getEmployeeCode() | async}}

注意：使用async管道時，您無需在組件方法（ getEmployeeCode() ）中訂閱GetLabelTextForEmployee() 。 Angular將已經訂閱它，並在標記進行更改檢測之前返回發出的最新值。

異步管道訂閱Observable或Promise並返回其發出的最新值。 發出新值時，異步管道會將要檢查的組件標記為更改。 銷毀組件后，異步管道將自動取消訂閱，以避免潛在的內存泄漏。