美文网首页
点击添加按钮增加一个组件

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

作者: 我是大队长_1342 | 来源:发表于2019-08-22 15:01 被阅读0次

父组件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;
}

相关文章

网友评论

      本文标题:点击添加按钮增加一个组件

      本文链接:https://www.haomeiwen.com/subject/edvnsctx.html