Angular8學習筆記 （組件 TodoMVC）

20190815

1、從GitHub上 下載代碼後，放到vs_workspace後，先npm install......

使用index.html中的body---section  & footer 部分 ，放入app.component.html中

2、導入樣式，除了向app.component.css文件導入外、還可以向styles.css導入

  ○導入樣式之前，需要先  npm  i  需要的包  eg: npm i todomvc-common todomvc-app-css

20190821

3、數據列表顯示

    有數據：*ngFor="let todo of todos" （遍歷數組）

    無數據：*ngIf="todos.length"

    ngIf結合ng-template標籤

4、添加任務

 app.component.html 

        事件：(keyup.enter)="addTodo($event)"

 app.component.ts   

  addTodo(e): void {
    const titleTxt = e.target.value;  // 定義一個變量來接收輸入框中的輸入的值
    if (!titleTxt.length) {  // 如果輸入框爲空，則返回
      return;
    }
    const last = this.todos[this.todos.length - 1];  // 獲取todos數組長度
    this.todos.push({ // 否則，把輸入框中的值存入到todos數組中
      id: last ? last.id + 1 : 1,
      title: titleTxt,
      done: false
    });
    e.target.value = ''; // 清空輸入框數據
  }

20190823

雙向數據綁定：[( )]

動態屬性綁定：[ ]

change事件綁定：（） 

5、利用雙向數據綁定顯示    

1、在app.component.html中添加   [(ngModel)]="todo.done"

2、在app.module中，導入FromsModule，並添加到imports列表中

// [(ngModel)] 必須導入FromsModule並把它添加到Angular模塊的imports列表中

標記所有任務完成/未完成

 <input id="toggle-all" class="toggle-all" type="checkbox" [checked]="toggleAll">

如果toggleAll爲true，該input被選中😄；否則，不被選中

任務項

    1.切換任務完成狀態

        樣式聯動

             NgClass指令接收一個對象，對象的key指定css類名，value給定一個Boolean值，當Boolean爲true時，則作用該類                                名，否則，移除該類名。

              NgStyle指令：雖然這是設置單一樣式的好辦法，但通常更喜歡使用多個NgStyle指令來同時設置多個內聯樣式。

        聯動切換所有任務狀態

      <input id="toggle-all" class="toggle-all" type="checkbox" 
             [checked]="toggleAll" 
             (change)="toggleAll=$event.target.checked">

       // $event 當前dom元素
       // 該dom元素有一個屬性checked，即選中與未選中的狀態

   2. 刪除任務項

對button增加click事件，再點擊的時候，會執行一個方法

 <button class="destroy" (click)="removeTodo(i)"></button> <!--根據數組索引下標刪除指定元素-->

根據索引下標來刪除任務項

【index 爲當前遍歷的索引】，聲明一個局部變量 i 進行接收

       <li *ngFor="let todo of todos;let i = index;" [ngClass]="{completed: todo.done}">
          <div class="view">
            <input class="toggle" type="checkbox" [(ngModel)]="todo.done">
            <label>{{ todo.title }}</label>
            <button class="destroy" (click)="removeTodo(i)"></button> <!--根據數組索引下標刪除指定元素-->
          </div>
          <input class="edit" value="Create a TodoMVC template">
        </li>

在組件類中聲明方法來處理

 // 刪除單個任務項

  removeTodo(index: number) {
    // console.log(index);

    // 根據索引從數組中刪除
    this.todos.splice(index, 1);
  }

   3.雙擊label進入編輯狀態  p33

 

6、編輯任務項

1.編輯文本框自動獲得焦點

 

2.在編輯文本框中敲回車或者失去焦點

 

3.輸入狀態按下esc，取消編輯

 

 

7、