- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
问题
如何在 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
最佳答案
我想你的意思是,当你打电话 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.
关于javascript - 如何在 Angular 员工 component.html 上返回 EmployeeCode?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54846885/
我是一名优秀的程序员,十分优秀!