Angular Typescript 更改数组中的对象属性而不更新视图

Question

我正在学习 Typescript 和 Angular，我有一个问题，即为什么在更新设置为我定义的对象的数组值时我的视图没有更新。我怀疑这与我失去上下文有关？我需要以某种方式运行 ngZone 吗？（我试过没有成功）。我怀疑这很简单，或者我忽略了一个概念。cardItems = {  addUser: true,  inventory: false}cardCollapseItems = [{  label: "addUser",  item: this.cardItems.addUser},{  label: "inventory",  item: this.cardItems.inventory},collapseCard(value){ let index = this.cardCollapseItems.findIndex(item => item.label === value) let cardItem = this.cardCollapseItems[index] cardItem.item ? cardItem.item = false : cardItem.item = true;} <ion-card-header (click)="collapseCard('addUser')"> <ion-card-content [hidden]="cardItems.addUser" >

Answer 1

尝试这个：

一：

@Component({

  selector: 'app-example-page',

  templateUrl: './example.page.html',

  styleUrls: ['./example.page.scss'],

  changeDetection: ChangeDetectionStrategy.OnPush,

})

二：

public cdRef: ChangeDetectorRef;

public constructor(

    cdRef: ChangeDetectorRef,

  ) {

    this.cdRef = cdRef;

  }

collapseCard(value){

 let index = this.cardCollapseItems.findIndex(item => item.label === value)

 let cardItem = this.cardCollapseItems[index]

 cardItem.item ? cardItem.item = false : cardItem.item = true;

 this.cdRef.detectChanges();

}

Answer 2

如果您试图cardItems在您的视图中显示。你必须从collapseCard函数中更新它。更新this.cardItems将解决问题。您将 true 或 false 分配给仅限于函数中的初始化变量的值。