Angular 2-组件无法正确呈现表标签

Question

I'm looking to dynamically load some data into a table. The data will show up onto the page, but it will not be properly formatted within my HTML table. All the text appears on a single line and has no table format whatsoever. I have a custom component with the following information:

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>

I have an @input() decorator in a child component called app-books .

app-books typescript file

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

  constructor() {
  }

app-books html file

<tr>
  <td>{{ book.title }}</td>
  <td>{{ book.author }}</td>
</tr>

Answer 1

If you take a look at your markup, you will see that your tr are embedded in app-books tag. So your markup is invalid. See

To resolve this, I suggest you use [app-book] for your component so that you can assign it as an attribute of the tr element:

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

Also, remove <tr> and </tr> from your app-book component markup. See the Plunker sample that illustrates this.

Edited

Angular 4 introduced the NgComponentOutlet directive that could be useful in this scenario. But, it does not allow passing an Input parameter to the referenced component. See the There is no way to access inputs or outputs of Components created by NgComponentOutlet issue. But, I've found the ng-dynamic-component package that can do this. So, your code may be:

Parent component:

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

Row component:

@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 };
}

The tr[app-book] selector is important here. It tells Angular to render a tr element with the app-book attribute. If you specify it as app-book , Angular will render the <app-book> tag, which is invalid markup. If you specify it as [app-book] , Angular will render <div app-book> , which is also invalid. See the sample that illustrates this.

Answer 2

If you pass the complete booksArray to the child component it not only makes it for a better separation of concerns, but it also allows you manipulate that data at a component level.

Try this:

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>