Я пытаюсь использовать флажок в Angular для переключения содержимого массива. Я использую логические свойства, чтобы определить, отмечены ли 3 разных поля, и соответствующим образом изменить содержимое массива. По умолчанию массив содержит все 3 подмассива, объявив this.allNouns в ngOnInit (). Когда я щелкаю первый флажок, я вижу в консоли, что он выполняет связанную функцию onchange и устанавливает соответствующий логический параметр как противоположный, но интерполированная строка в представлении не изменяется. Когда я щелкну по нему еще раз, он изменит вид, но теперь все на шаг позади. Также, когда он попадает в журналы консоли, он загружает предыдущую длину, а не длину вновь созданного this.allNouns. Ниже приведены html и фрагменты ts, связанные с ним. Это первый из трех флажков, но я планирую применить его ко всем при сглаживании.
TS
preloadedNouns: Boolean = true;
toggleData() {
if(this.preloadedNouns==false){
this.allNouns=this.nouns.concat(this.onlyUserNouns);
console.log('hitting first condition in toggledata', this.allNouns.length);
}
else {
this.allNouns=this.nouns.concat(this.stockNouns).concat(this.onlyUserNouns);
console.log('hitting second condition in toggledata', this.allNouns.length);
}
}
HTML
<div name="allNouns" [(ngModel)]="allNouns" [ngModelOptions]="{standalone: true}" ngDefaultControl>{{allNouns.length}}</div>
<div class="toggleDiv">
<label>Preloaded Nouns</label>
<input id="preloadedNounsCheck"
type="checkbox"
[checked]="preloadedNouns"
(change)="toggleData(); preloadedNouns = !preloadedNouns">
</div>