3 回答

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超7個(gè)贊
在您的 HTML 文件中使用它。
<td>{{ p.jobTitle.jobTitleName }}</td>

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
代碼中的所有內(nèi)容都沒有問題,唯一的問題是該屬性jobTitle是Object
您有 3 個(gè)可用選項(xiàng)(或更多)
選項(xiàng)1
從后端以字符串形式返回值;這意味著我們可以將您的界面修改為
export interface IEmployee {
userId: any;
firstName: string;
jobTitle: string;
lastName: String;
}
選項(xiàng)2
更改接口以反映Object來自后端的
export interface IEmployee {
userId: any;
firstName: string;
jobTitle: { jobTitleName: string; jobTitleId: number };
lastName: String;
}
現(xiàn)在您可以在您的 html 中使用它,如下所示。這種方法已由@shehanpathirathna 闡述
<td>{{ p.jobTitle.jobTitleName }}</td>
選項(xiàng)3
用于map生成具有所需結(jié)構(gòu)的新對(duì)象
import { map } from 'rxjs/operators';
export class VisibilityComponent implements OnInit {
pmDetails1: IEmployee[];
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getAllUsers().pipe(
map(employeea => employees.map(
(employee) => ({...employee, jobTitle: jobTitle.jobTitleName })
))
).subscribe((pmDetails1: IEmployee[]) => {
this.pmDetails1 = pmDetails1;
console.log(pmDetails1);
console.log(pmDetails1[0].jobTitle);
});
}
}
對(duì)于這種特定情況,此選項(xiàng)可能有點(diǎn)過大,但如果對(duì)象變得更復(fù)雜,則可能非常有幫助

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊
嘗試這個(gè) :
export class VisibilityComponent implements OnInit {
pmDetails1: IEmployee[];
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getAllUsers().subscribe(data => {
this.pmDetails1 = data;
console.log(pmDetails1);
console.log(pmDetails1[0].jobTitle);
});
}
}
添加回答
舉報(bào)