Saya ingin memuat beberapa data secara dinamis ke dalam tabel. Data akan muncul ke halaman, tetapi tidak akan diformat dengan benar dalam tabel HTML saya. Semua teks muncul dalam satu baris dan tidak memiliki format tabel apa pun. Saya memiliki komponen khusus dengan informasi berikut:

HTML

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Book Name</th>
        <th>Author Name</th>
      </tr>
    </thead>
    <tbody>
      <app-books *ngFor="let book of booksArray" [book]="book"></app-books>
    </tbody>
  </table>

Saya memiliki dekorator @input() di komponen turunan yang disebut app-books.

File naskah buku aplikasi

  @Input() book: {title: string, author: string, cover_img: string};

  constructor() {
  }

File html buku aplikasi

<tr>
  <td>{{ book.title }}</td>
  <td>{{ book.author }}</td>
</tr>
1
Ryan Shocker 10 Agustus 2017, 22:40

2 jawaban

Jawaban Terbaik

Jika Anda melihat markup Anda, Anda akan melihat bahwa tr Anda disematkan di tag app-books. Jadi markup Anda tidak valid. Lihat

enter image description here

Untuk mengatasi ini, saya sarankan Anda menggunakan [app-book] untuk komponen Anda sehingga Anda dapat menetapkannya sebagai atribut elemen tr:

<tr *ngFor="let book of booksArray" [app-book]="book"></tr>

Juga, hapus <tr> dan </tr> dari markup komponen app-book Anda. Lihat Contoh Plunker yang menggambarkan hal ini.

Diedit

Angular 4 memperkenalkan direktif NgComponentOutlet yang dapat berguna dalam skenario ini. Tapi, itu tidak memungkinkan melewati parameter Input ke komponen yang direferensikan. Lihat masalah Tidak ada cara untuk mengakses input atau output Komponen yang dibuat oleh NgComponentOutlet. Tapi, saya telah menemukan paket ng-dynamic-component yang dapat melakukan ini. Jadi, kode Anda mungkin:

Komponen induk:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Book Name</th>
            <th>Author Name</th>
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-item [ngForOf]="booksArray" let-i="index" [ngForTrackBy]="trackByFn">
            <ng-container [ngComponentOutlet]="AppBook" [ndcDynamicInputs]="{book: item}"></ng-container>
        </ng-template>
    </tbody>
</table>

Komponen baris:

@Component({
  selector: 'tr[app-book]',
  template: `
    <td>{{ book?.title }}</td>
    <td>{{ book?.author }}</td>
  `
})
export class AppBook {
  @Input() book: { title: string, author: string, cover_img: string };
}

Pemilih tr[app-book] penting di sini. Ini memberitahu Angular untuk merender elemen tr dengan atribut app-book. Jika Anda menetapkannya sebagai app-book, Angular akan merender tag <app-book>, yang merupakan markup yang tidak valid. Jika Anda menetapkannya sebagai [app-book], Angular akan merender <div app-book>, yang juga tidak valid. Lihat contoh yang menggambarkan hal ini.

3
Gosha_Fighten 9 Oktober 2017, 22:33

Jika Anda meneruskan booksArray lengkap ke komponen turunan, hal itu tidak hanya membuat pemisahan masalah menjadi lebih baik, tetapi juga memungkinkan Anda memanipulasi data tersebut pada tingkat komponen.

Coba ini:

App.html

<app-books [books]="booksArray"></app-books>

AppBooksComponent.ts

export default class AppBooksComponent {
  @Input('booksArray') books: any;
  constructor() {}
}

AppBooksComponent.html

<tr *ngFor="book in books">
  <td>{{ book.title }}</td>
  <td>{{ book.author }}</td>
</tr>
1
Baruch 10 Agustus 2017, 19:46