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、