Saya menggunakan Sudut 9.

Saya mencoba membuat tabel dinamis dari array 2 dimensi.

Saya memiliki yang berikut ini yang menampilkan elemen pertama dengan sukses.

<mat-card class="approval-edit-card-nominated">
    Nominated Evaluators
    <div>
        {{nominationAllOf[0].nominations[0].evaluatorInfo.personalInfo.name.firstName}}
        {{nominationAllOf[0].nominations[0].evaluatorInfo.personalInfo.name.lastName}}
    </div>
</mat-card>

Namun, saya ingin membuat tabel yang menampilkan semua baris dan kolom. Jadi saya mencoba yang berikut ini:

<mat-card class="approval-edit-card-nominated">
    Nominated Evaluators {{nominationAllOf[0].nominations.length}}
    <div>
        <table>    
            <tr *ngFor="let nomination of nominationAllOf">
                <td *ngFor="let item of nomination">
                    {{item.evaluatorInfo.personalInfo.name.firstName}}
                    {{item.evaluatorInfo.personalInfo.name.lastName}}
                </td>
            </tr>
        </table>
    </div>
</mat-card>

{{nominationAllOf[0].nominations.length}} adalah 3. Tapi tabel tidak ditampilkan.

Pertanyaan

Bagaimana cara menampilkan tabel dari array 2 dimensi?

Kesalahan

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Terima kasih

0
Richard 6 Juli 2020, 08:41

1 menjawab

Jawaban Terbaik

Anda kehilangan .nominations di loop dalam Anda:

<table>    
    <tr *ngFor="let nomination of nominationAllOf">
        <td *ngFor="let item of nomination.nominations">
            {{item.evaluatorInfo.personalInfo.name.firstName}}
            {{item.evaluatorInfo.personalInfo.name.lastName}}
        </td>
    </tr>
</table>

Tip: Anda dapat dengan mudah men-debug kasus tersebut dengan menggunakan pipa json. Dalam hal ini, Anda dapat menggunakan:

<tr *ngFor="let nomination of nominationAllOf">
{{ nomination | json }}

Dan Anda akan melihat konten objek nomination.

2
Sebastian Kaczmarek 6 Juli 2020, 05:48