angular @Input 获取对象对象

Question

我有 table，当我单击该行时，该行显示在与 table 不同的组件中以传递信息，我使用 @input 装饰器但是当我尝试将结果显示在我的其他组件我有 [object Object]

table.html

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selected(row)"</tr>
</table>

table.ts

 public selectedArrayParent!: Product;
     selected(row:Product) {
        this.selectedArrayParent = row;
        console.log(this.selectedArrayParent);
      }

info.ts

 @Input() public selectedArrayEnfant!: Product;

info.html

{{selectedArrayEnfant}}

Answer 1

您无法在 html 中看到对象，您需要将其字符串化。我创建了一个 example 供您理解

我为您创建了演示管道。此管道将对象作为字符串

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'stringfy'
})
export class StringfyPipe implements PipeTransform {

  transform(value: any): any {
    return JSON.stringify(value);
  }

}

在html中我确实把它们都放了

  {{selectedArrayEnfant}}
  {{ selectedArrayEnfant| stringfy}}

那么结果将是

[object Object]
{"test":"test"}

Answer 2

根据您的代码，输入参数是对象类型，因此您必须将对象转换为字符串才能显示结果。在所选函数中使用 console.log(JSON.stringify(this.selectedArrayParent)) 以字符串格式获取 JSON。对于 html

angular @Input 获取对象对象

angular @Input get object object

typescript

angular-material

angular