Angular 12：找不到“object”类型的不同支持对象“[object Object]”答案

【问题标题】：Angular 12: Cannot find a differ supporting object '[object Object]' of type 'object'Angular 12：找不到“object”类型的不同支持对象“[object Object]”
【发布时间】：2021-11-20 15:32:03
【问题描述】：

希望有人可以在这个问题上帮助我。

我在 Angular 中有一个组件，我正在尝试将对象列表发送到模态组件以显示在表格中，但我不断收到标题中列出的错误。控制台记录数据，它显示它正在以数组的形式接收它，但它仍然不会去。

首先这是我从服务中获取数据的方式：

计划服务

    return this.http.get<BasePartFormatted[]>(
      `$apiurl`
    );
  }

然后在 ngOnInit 中，这就是我为表绑定设置部件列表的方式：

零件清单组件 TS

partList$: Observable<BasePartFormatted[]>;
selectedParts: BasePartFormatted[] | null; <-- for primeng selection bind
ngOnInit: void {
    this.partList$ = this.planService.getParts(this.flowID);
}

为了呈现表格中的列表，我使用异步管道。此外，我将primeng 用于框架，并将列表中的选定项目用于组件模式。根据primeng文档，所选项目被放入一个n数组中。

零件列表 HTML

<p-table
    #partsList
    [value]="partList$ | async"
    [(selection)]="selectedParts"
  >

  <ng-template #modal_content_go let-modal>
    <modal-form
      [selectedParts]="selectedParts" 
    ></modal-form>
  </ng-template>

在模态组件中，我尝试将其作为@Input 引入：

模态组件 TS

@Input() selectedParts: BasePartFormatted[];

并尝试在模态html中呈现：

模态 HTML

  <p-table
    #selectedParts
    [value]="selectedParts"
  >
...
 <ng-template pTemplate="body" let-part>
      <td>{{ part.item1}}</td>
      <td>{{ part.item2}}</td>
      <td>{{ part.item3}}</td>
      <td>{{ part.item4}}</td>
    </ng-template>

为了检查 selectedParts 实际上是什么，我在 Modal html 上创建了一个按钮来 console.log 输出，它说它是两个对象的数组： Console.log showing an array of two objects

我已经尝试将列表转换为另一个 observable，因为它适用于初始列表，但由于某种原因我遇到了异步管道问题。

已经为此苦苦挣扎了一分钟，希望获得有关如何解决此问题的建议。感谢您提供任何帮助或想法。

【问题讨论】：

标签： arrays angular observable

【解决方案1】：

问题

根据What does Angular 2 hashtags in template mean?

模板呈现 HTML。在模板中，您可以使用数据、属性绑定和事件绑定。这是通过以下语法完成的：

# - 变量声明

此 selectedParts 变量与 HTML 和组件冲突。

模态 HTML

<p-table
    #selectedParts
    [value]="selectedParts"
  >
  ...
</p-table>

模态组件

@Input() selectedParts: BasePartFormatted[];

解决方案

从 HTML 中删除 #selectedParts 或重命名它，使其不与 selectedParts @Input 属性冲突。

<p-table
    [value]="selectedParts"
  >
  ...
</p-table>

Sample Solution on StackBlitz

【讨论】：

优秀。太感谢了。确认我们现在正在工作。