如何在有角员工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并返回其发出的最新值。 发出新值时，异步管道会将要检查的组件标记为更改。 销毁组件后，异步管道将自动取消订阅，以避免潜在的内存泄漏。