angular4のネストされたコンポーネントを持つブートストラップテーブル

Question

私はangular4の初心者です。ネストされたコンポーネントでブートストラップテーブルを作成しようとしています。子コンポーネントは単一の行に表示されています。 しかし以下の表は画像を参照correctly.please表示されていない

snapshot

親コンポーネント

<table class="table table-dark"> 
    <thead> 
    <tr> 
     <th>Title</th> 
     <th>Done</th> 
     <th>Action</th> 
    </tr> 
    </thead> 
    <tbody> 
    <app-child *ngFor="let todo of this.todos " [todo]="todo" (eventRemove)="remove(todo)"></app-child> 
    </tbody> 
</table> 
<hr> 
<div> 
    <form #f="ngForm" (ngSubmit)="formSubmit(f.value)"> 
    <label for="title"></label> 
    <input type="text" name="title" id="title" [(ngModel)]="this.todo.title"> 
    <button type="submit">Add</button> 
    </form> 
</div> 



import { Todo } from '../todo'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    public todos: Todo[] = []; 
    public todo: Todo = { title: "", done: false }; 
    formSubmit(value) { 
    var todo = { title: value.title, done: false }; 
    this.todos.push(todo); 
    } 
    constructor() { 


    } 

    ngOnInit() { 
    this.todos.push({ title: "clean your room", done: false }); 
    this.todos.push({ title: "clean your desk", done: true }); 

    } 
    remove(t) { 
    let index = this.todos.indexOf(t); 
    this.todos.splice(index, 1); 
    console.log("removed", t); 
    } 

} 

子コンポーネント

<tr> 
    <td> 
     {{todo.title}} 
    </td> 
    <td> 
     <input type="checkbox" [checked]="todo.done"> 
    </td> 
    <td> 
     <button class="btn btn-success btn-sm" (click)="onRemove(todo)">Remove</button> 
    </td> 
</tr> 

インポートから{藤堂} ../todo '; '@ angle/core'の{Component、Input、Output、OnInit、EventEmitter}をインポートします。あなたがテーブルを表示するには、子コンポーネントを使用したい場合は、単にたら、この子を呼び出し、「this.todos」変数を渡して、その子内ngForループを入れ

@Component({ 
    selector: 'app-child', 
    templateUrl: './child.component.html', 
    styleUrls: ['./child.component.css'] 
}) 

    export class ChildComponent implements OnInit { 

     @Input() 
     todo: Todo; 
     @Output() 
     eventRemove = new EventEmitter<Todo>(); 
     constructor() { } 

     ngOnInit() { 
     } 
     onRemove(data) { 

     this.eventRemove.emit(data); 
     } 
    } 

Answer 1

。

しかし、テーブルを1か所にしか表示していない場合は、子供を使用することは意味をなさない可能性があります。<tbody>に 'this.todos'をループするだけです。