Question

我有以下内容：

<div class="container-fluid">
  {{ testCount }}<button (click)="onClick()">Click</button>
</div>

使用以下脚本：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  test = []
  testCount = this.test.length

  constructor() {

  }

  onClick() {
    this.test.push({})
    console.log(this.testCount)
  }
}

我的问题是，当我将新元素推送到它引用的数组时，testCount不会在HTML中更新。我确信这背后有一个逻辑上的解释，以及关于可观察对象的可能解决方案，但我找不到解决方案。我在做什么错了？

Answer 1

更改测试大小时，必须更新this.testCount。如果您希望它在html中自动更新，请使用而不是尝试将派生的属性存储在组件的状态中。由于为此（test.length）拥有单一的事实来源很容易。

<div class="container-fluid">
  {{ test.length }}<button (click)="onClick()">Click</button>
</div>

Answer 2

每次将新元素推入数组时，testCount变量将不会更新。在组件生命周期开始之初就为它分配了值this.test.length。

控制器

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public test = [];
  testCount = this.test.length; // <-- assigned a value once at the beginning and never updated again

  constructor() { }

  onClick() {
    this.test.push({});
    console.log(this.testCount);  // <-- will log 0
  }
}

一种快速的方法是直接在模板中使用length属性

模板

<div class="container-fluid">
  {{ test.length }}<button (mouseup)="onClick()">Click</button>
</div>

角度组件属性不会在引用属性更改时更新

2 个答案: