Angular 12: 无法找到类型 'object' 的不同支持 object '[object Object]'

Question

希望有人能帮助我解决这个问题。

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

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

计划服务

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

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

部件列表组件 TS

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

为了在 table 中呈现列表，我使用了异步管道。此外，我将 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 输出，它说它是两个 objects 的数组： Console.log showing an array of two objects

我尝试将列表转换为另一个可观察对象，因为它在初始列表上有效，但由于某种原因我遇到了异步管道问题。

一直在为这个问题苦苦挣扎一分钟，想就如何解决这个问题提出建议。感谢任何帮助或想法。

Answer 1

问题

根据What does Angular 2 hashtags in template mean?

Templates render HTML. In a template you can use data, property binding and event binding. This is accomplished with the following syntax:

# - variable declaration

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

Modal HTML

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

Modal Component

@Input() selectedParts: BasePartFormatted[];

解决方案

从 HTML 中删除 #selectedParts 或重命名，以免与 selectedParts @Input 属性.

冲突

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

Sample Solution on StackBlitz

Angular 12: 无法找到类型 'object' 的不同支持 object '[object Object]'

Angular 12: Cannot find a differ supporting object '[object Object]' of type 'object'

arrays

observable

angular

问题

解决方案