Angular 12：找不到支持 object 类型为“object”的“[object Object]”

Question

Hopefully someone out there can assist me in this issue.

I have a component in Angular that I am trying have send a list of objects to a modal component to display in a table but I keep getting the error listed in the title. Console logging the data it shows that it is receiving it in an Array but it still won't go.

First this is how I am getting the data from the service:

Plan Service

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

Then in the ngOnInit this is how I am setting the parts list for the table bind:

Part List Component TS

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

To render the list in the table I use the async pipe. Also I use primeng for the framework and pipe the selected items in the list for the component modal. The selected items get dropped into an array based on the primeng documentation.

Part List HTML

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

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

In the modal component I try to bring it in as an @Input:

Modal Component TS

@Input() selectedParts: BasePartFormatted[];

And try to render in the modal html:

Modal 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>

To check what the selectedParts actually were, I created a button on the Modal html to console.log the output and it says that it is an array for two objects: Console.log showing an array of two objects

I've tried turning the list into another observable since it worked on the initial one but then I get an async pipe issue for some reason.

Been struggling with this one for a minute and would like suggestions on how to solve this issue. Any help or ideas is appreciated.

Answer 1

Issue

According to 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

This selectedParts variable is conflicted for the HTML and component.

Modal HTML

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

Modal Component

@Input() selectedParts: BasePartFormatted[];

---

Solution

Remove #selectedParts from HTML or rename it so that it is not conflicted with selectedParts @Input property.

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

Sample Solution on StackBlitz