javascript - 如何在 Angular 员工 component.html 上返回 EmployeeCode？

Question

问题

如何在 Angular 员工 component.html 上返回 EmployeeCode ？

示例数据引用表

Code  tableName   FieldName   LabelText
111   Employees   EmployeeId  EmployeeCode

调用结果

GetLabelTextForEmployee('Employees','EmployeeId')

it suppose Return EmployeeCode

我使用 Angular 6 开发 ASP.NET Core 2.1 Web API。

我在 Web API 名称 GetReferenceFileData 上创建函数来从中获取标签文本

数据库并根据引用表显示在employees.component.html上的 View 上。

这是我的功能:

[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 但处于无限循环中并且没有作为图像显示在表单上显示 Result of code on post infinite loop

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}}

注意:您无需订阅GetLabelTextForEmployee()在您的组件方法( getEmployeeCode() )中使用 async 时管道。在标记更改检测之前，Angular 已经订阅了它，并返回发出的最新值。

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.