时间戳

首页 > 解决方案 > ngModel 或双向绑定在 Angular 中是否需要很长时间？

angular - ngModel 或双向绑定在 Angular 中是否需要很长时间？

问题描述

带复选框的 PrimeNG 可编辑表

子组件

<p-table id="resultTable" [columns]="cols" [value]="results" scrollable="true" [resizableColumns]="true" selectionMode="single">
...
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
  ...
    <td>
      <input (click)="checkboxClicked(rowData)" pInputText type="checkbox" [(ngModel)]="rowData.active">
    </td>
  ...
  </ng-template>
...
</p-table>

@Component({
  selector: 'app-child',
  templateUrl: './app-child.html',
  styleUrls: ['./app-child.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
  ...
  checkboxClicked(book: Book) {
    console.log('111:', book.active);   //      check the value with ngModel    
    this.checkboxClick.emit(book);
  }
  ...
}

父组件

...
<app-child (checkboxClick)="checkbox($event)"></app-child>
...

@Component({
  selector: 'app-parent',
  templateUrl: './app-parent.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent implements OnInit, OnDestroy {

checkboxClickSource = new Subject<Book>();

ngOnInit() {
  this.checkboxClickSource.pipe(
    ...
  ).subscribe(book => {
   console.log('222:', book.active);  //    check the value with ngModel
  });
}


checkbox(book: Book) {
  this.checkboxClickSource.next(book);

}
}

然后有一个问题对我来说很奇怪。首先假设 book.active 一开始是真的。

在 IE 浏览器中：输出为：111: false 222: false

在chrome浏览器中：生产模式：111: true 222: false

无生产模式： 111: true 222: true

在 IE 浏览器中，ngModel 立即生效。但是在 chrome 浏览器和生产模式下，ngModel 在值已传递给父组件时工作，但在子组件中没有更改。在 chrome 浏览器和非生产模式下，ngModel 在子组件和父组件中都不起作用。

这对我来说真的很奇怪，我无法弄清楚。有人能告诉我为什么会这样吗？

标签： angularangular-ngmodeltwo-way-bindingprimeng-turbotable

解决方案

推荐阅读