Angular 数据添加删除

最新推荐文章于 2022-07-10 12:13:36 发布

Magic_小小阿昕

最新推荐文章于 2022-07-10 12:13:36 发布

阅读量604

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签：数据添加删除

本文链接：https://blog.youkuaiyun.com/Amo__/article/details/101270693

Angular 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Angular中实现数据的添加和删除操作，通过使用ngModel进行双向数据绑定，以及利用*ngFor指令来动态渲染列表项。同时，文章展示了如何通过按钮触发事件，实现对数组元素的动态增删。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular 数据添加删除

<div class="search_box">
    <input type="text" placeholder="请输入……"  [(ngModel)]="keyWord"><button (click)="searchBtn()" >搜索</button>
<hr>
    <div class="search_list" *ngFor="let item of historyList;let key=index">
        {{item}} <button (click)="delete(key)">X</button>
    </div>
</div>

export class ToDolistComponent implements OnInit {
  public keyWord: string;
  public historyList: any[] = [];
  constructor() { }

  ngOnInit() {
  }
  searchBtn() {
    if (this.historyList.indexOf(this.keyWord) == -1) {
      this.historyList.push(this.keyWord);
    }
    this.keyWord = '';
  }
  delete(key) {
    this.historyList.splice(key, 1);
  }
}