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，但处于无限循环中，没有在窗体上显示为图像显示 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将已经订阅它，并在标记为进行更改检测之前返回发出的最新值。

异步管道订阅Observable或Promise并返回其发出的最新值。发出新值时，异步管道会将要检查的组件标记为更改。当组件被销毁时，异步管道将自动退订，以避免潜在的内存泄漏。

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

1 个答案: