場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

然后新建一個search組件

ng g component components/search

后面是跟的app下的組件的路徑和組件名

?

然后修改組件中的html

<div class="search"><input type="text" [(ngModel)]="keyword" />? <button (click)="doSearch()">搜索</button><hr><ul><li *ngFor="let item of historyList;let key=index;">{{item}}?? ------ <button (click)="deleteHistroy(key)">X</button></li></ul></div>

然后修改ts中的代碼

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-search',templateUrl: './search.component.html',styleUrls: ['./search.component.scss'] }) export class SearchComponent implements OnInit {public keyword:string;public historyList:any[]=[];constructor() { }ngOnInit(): void {}doSearch(){if(this.historyList.indexOf(this.keyword)==-1){this.historyList.push(this.keyword);}???this.keyword='';???}deleteHistroy(key){this.historyList.splice(key,1);} }

為了讓html中的內容顯示居中，在scss中添加

.search{width: 400px;margin: 20px auto;input{margin-bottom: 20px;width: 300px;height: 32px;}button{height: 32px;width: 80px;} }

然后修改app.components.html，將search組件顯示在項目主頁面上

?

效果

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Angular中实现一个简单的toDoList(待办事项)示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。