Angular свойство компонента не обновляется при изменении ссылки на свойство

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, когда я пу sh новый элемент массива, на который он ссылается. Я уверен, что есть логическое объяснение этому и возможное решение относительно наблюдаемых, но я не могу найти решение. Что я делаю не так?

Answer 1

Вам нужно будет обновить this.testCount при изменении размера теста. Если вы хотите, чтобы оно автоматически обновлялось в html, просто используйте вместо попытки сохранить производное свойство в состоянии компонента. Так как для этого достаточно простого источника правды (test.length).

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

Answer 2

Переменная testCount не будет обновляться, когда вы каждый раз добавляете в массив sh новые элементы. Ему присваивается значение 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>