点击添加按钮增加一个组件

2019-08-22  本文已影响0人  我是大队长_1342

父组件html:

<button class="button" (click)="add()">add</button>
  <button class="button" (click)="save()">alert</button>

  <div *ngFor="let article of all;let idx=index">
    <app-article [attr.data-index]="idx" [article]="article"></app-article>
  </div>

父组件ts:

articles: Article[];
  all: any[] = [{}];
add() {
    this.all.push({});
  }

子组件html:

 <div class="value">
      <div class="label"  >标题 </div> 
      <input type="text" [(ngModel)]="article.title" id="title">
      <input type="text" [(ngModel)]="article.link">
    </div>

子组件ts:

 @Input() article: Article;

article.model.ts

export class Article {
    votes: number;
    title: string;
    link: string;
}
上一篇 下一篇

猜你喜欢

热点阅读