[英]How to return EmployeeCode on angular employees component.html?
Problem 问题
How to return EmployeeCode on angular employees component.html ? 如何在有角员工component.html上返回EmployeeCode?
Sample data ReferenceTable 样本数据参考表
Code tableName FieldName LabelText
111 Employees EmployeeId EmployeeCode
Result of calling 通话结果
GetLabelTextForEmployee('Employees','EmployeeId')
it suppose Return EmployeeCode
I work on asp.net core 2.1 web API with angular 6. 我使用角度为6的asp.net core 2.1 Web API进行工作。
I make function on web API name GetReferenceFileData to get text of label from 我在Web API名称GetReferenceFileData上创建函数以从中获取标签文本
database and show on view on employees.component.html based on Reference Table . 数据库并在基于参考表的employee.component.html上显示。
This is my function : 这是我的功能:
[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);
}
Function above return only one string value for label as Scalar Value 上面的函数只返回一个字符串值作为标量值作为标签
What I have tried: 我试过的
1- on API service I create Function Below : 1-关于API服务,我在下面创建函数:
GetLabelTextForEmployee(tableName:string,FieldName : string)
{
return this.http.get('https://localhost:44326/api/reference/' + tableName + '/' + FieldName);
}
on employee.component.html
// how to use function GetLabelTextForEmployee here to return EmployeeCode I make code according exist on post : //如何在此处使用函数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}}
Result as below I get EmployeeCode but in infinite loop and not show on form as image display Result of code on post infinite loop 如下所示,我得到EmployeeCode,但处于无限循环状态,并且不以图像显示形式显示在窗体上。
I assume you mean, when you call GetLabelTextForEmployee()
you aren't getting a result (or rather, you aren't getting the result you expect)? 我假设您的意思是,当您调用
GetLabelTextForEmployee()
时,没有得到结果(或者,没有得到预期的结果)?
When you use Angular's HttpClient
for HTTP requests, you must subscribe to the method, otherwise it is never actually executed. 当您使用Angular的
HttpClient
进行HTTP请求时, 必须订阅该方法,否则它将永远不会实际执行。
In your employee.component.ts
, you'l need to call the function, subscribe to it, and assign the result to a local variable. 在
employee.component.ts
,您需要调用该函数,对其进行订阅,然后将结果分配给局部变量。 You can then use that local variable in your template ( employee.component.html
); 然后,您可以在模板(
employee.component.html
)中使用该局部变量。
The following assumes you want to call the function on component initialisation, and your function is in a service call ApiService
, and that your api returns an object. 以下假设您要在组件初始化时调用该函数,并且该函数在服务调用
ApiService
,并且您的api返回一个对象。
employee.component.ts employee.component.ts
employee: any;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.apiService.GetLabelTextForEmployee().subscribe(result => {
this.employee = result;
}
}
employee.component.html employee.component.html
Now, with your local variable assigned, you can use interpolation to display the value. 现在,在分配了局部变量的情况下,可以使用插值来显示值。
eg 例如
<span class="employee-code">{{employee.employeeCode}}</span>
Again, this is on the assumption your API returns an object, which you're accessing in the template with {{employee.employeeCode}}
. 再次,这是假设您的API返回了一个对象,您正在使用
{{employee.employeeCode}}
在模板中访问该对象。
If your API returns a string, then you're simply interpolating {{employee}}
如果您的API返回一个字符串,那么您只是在插值
{{employee}}
EDIT 编辑
If you want to call the function directly from the template, you still use interpolation, but as your function is in a service, you would need to have a function in your component which calls the service. 如果要直接从模板调用该函数,则仍然可以使用插值,但是由于该函数位于服务中,因此您将需要在组件中有一个函数来调用该服务。 It's not recommended to call a service function directly from the template.
不建议直接从模板调用服务函数。
ie 即
employee.component.ts employee.component.ts
getEmployeeCode() {
return this.apiService.GetLabelTextForEmployee('Employees','EmployeeId');
}
employee.component.html employee.component.html
Now, you can call getEmployeeCode()
from your template, and use the async
pipe. 现在,您可以从模板调用
getEmployeeCode()
并使用async
管道。
{{getEmployeeCode() | async}}
NOTE: You do NOT need to subscribe to GetLabelTextForEmployee()
in your component method ( getEmployeeCode()
) when using the async
pipe. 注意:使用
async
管道时,您无需在组件方法( getEmployeeCode()
)中订阅GetLabelTextForEmployee()
。 Angular will already subscribe to it, and return the latest value emitted, before marking for change detection. Angular将已经订阅它,并在标记进行更改检测之前返回发出的最新值。
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.
异步管道订阅Observable或Promise并返回其发出的最新值。 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.
销毁组件后,异步管道将自动取消订阅,以避免潜在的内存泄漏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.