不知为啥 [checked]=“item.completed” 视频中能实现双向绑定,而我实现不了。

来源:2-13 任务列表之任务组件

ChenBugBug

2019-04-28

实现点击按钮更改 item.completed(本节视频第16分钟)
我尝试了以下两种, 第一种是视频中的做法:

 // 设置属性 [checked] = "item.completed",
 // 当item.completed只能单向传递到 mat-checkbox中,点击按钮更改不了item.completed的值
  <mat-checkbox type="checkbox" class="completion-status" [checked]="item.completed">
  </mat-checkbox>
// 而当我设为[(ngModel)]="item.completed" 时,item.completed 就能双向传递到 mat-checkbox中
  <mat-checkbox type="checkbox" class="completion-status" [(ngModel)]="item.completed" >
  </mat-checkbox>

不知为啥 [checked]=“item.completed” 视频中能实现双向绑定,而我实现不了。
有遇到同样情况的同学吗

完整代码:

<mat-list-item class="container">
  <mat-checkbox type="checkbox" 
  class="completion-status" [checked]="item.completed" [checked]="item.completed"></mat-checkbox>
  <div mat-line class="content" [ngClass]="{'completed': item.completed}">{{item.desc}}</div>
  <div mat-line class="button-bar">
    <span class="dueDate" *ngIf="item.dueDate" >
      {{item?.dueDate | date: "yy-MM-dd"}}
    </span>
    <mat-icon class="alarm" *ngIf="item.reminder">alarm</mat-icon>
  </div>
  <mat-icon  [svgIcon]="avatar" mat-list-avatar class="avatar"></mat-icon>
  <div>
  </div>
</mat-list-item>
写回答

1回答

接灰的电子产品

2019-05-02

你说的那种本身就是单向绑定,课程中使用单向的绑定和事件的绑定来进行处理的

0
1
ChenBugBug
非常感谢!
2019-05-05
共1条回复

Angular打造企业级协作平台,让你在Angular领域中出类拔萃

全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用

998 学习 · 536 问题

查看课程