typescript 表组件不显示对象Angular 中的字段

k5hmc34c  于 2023-01-21  发布在  TypeScript
关注(0)|答案(2)|浏览(143)

我尝试使用primeng中的p-table组件,但是我无法显示学生的名字和姓氏,因为它是headArray中的对象,建议如何解决这个问题?
我的“学生”模式

id: number;
name: Name;

和名称模型

firstName: string;
lastName: string;

超文本标记语言

<p-table [value]="students">
<ng-template pTemplate="header">
  <tr>
    <th *ngFor="let head of headArray">
        {{head.Head}}
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-student>
  <tr>
    <td *ngFor="let head of headArray">
      {{student[head.FieldName]}}
    </td>
  </tr>
</ng-template>

typescript

public headArray = [
{ 'Head': 'Last Name', 'FieldName': 'name["lastName"]' },
{ 'Head': 'First Name', 'FieldName': 'name["firstName"]' },
{ 'Head': 'ID', 'FieldName': 'id' }
];

public getStudents(): void {
this.studentService.getStudents().subscribe(
  (response: Student[]) => {
    console.log(response);
    this.students = response;
  },
  (error: HttpErrorResponse) => {
    alert(error.message);
  }
)

我也试过了,可惜没成功

public headArray = [
    { 'Head': 'Last Name', 'FieldName': 'name.lastName' },
    { 'Head': 'First Name', 'FieldName': 'name.firstName' },
    { 'Head': 'Id', 'FieldName': 'id' }
  ];

getStudents方法在调用ngOnInit时运行,并填充学生数组

jv4diomz

jv4diomz1#

要访问嵌套对象,我们可以创建自定义管道来将字符串点符号转换为对象键

    • 示例**
import { Pipe, PipeTransform } from '@angular/core';
import { Student } from './model';

@Pipe({
  name: 'createPath',
})
export class CreatePathPipe implements PipeTransform {
  transform(student: Student,fieldName?: string): any {
    return fieldName.split('.').reduce((p, c) => (p && p[c]) || null, student);
  }
}
    • 超文本标记语言**
<td *ngFor="let head of headArray">
      {{ student | createPath: head.FieldName }}
</td>
    • 一个
f8rj6qna

f8rj6qna2#

您可以使用点表示法访问模板中“name”对象的嵌套属性。在Typescript文件中,将headArray中的"FieldName"值分别更改为'name.firstName''name.lastName'

public headArray = [
{ 'Head': 'Last Name', 'FieldName': 'name.lastName' },
{ 'Head': 'First Name', 'FieldName': 'name.firstName' },
{ 'Head': 'ID', 'FieldName': 'id' }
];

在HTML中

<td *ngFor="let head of headArray">
  {{student[head.FieldName]}}
</td>

希望这有帮助!干杯!!

相关问题