Angular значение компонента не отражается в HTML

Question

У меня есть предопределенный массив в angular компоненте. Сначала я печатаю значение в HTML. При нажатии кнопки я использую сплайс для изменения значения массива. Значение изменяется, но оно не отражается в HTML.

<h3>Array before</h3>
<br><br>
{{array}}
<br><br><br>
<button type="button" (click)="methodSplice();">click</button>
<br>
<h3>Array After</h3>

<label>array:</label>
{{array}}

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
array = [];
temp:any;
arr1:any
constructor(){

}
ngOnInit(){
  this.array = [1,2,3,4,5];
}
  methodSplice(){
    this.array.splice(2,4);

  }

}

Answer 1

Это потому, что вам нужно присвоить значение обратно this.array (или другими словами: обновить существующее значение).

  methodSplice(){
    this.array = this.array.splice(2,4);
  }

Ваш файл компонента будет выглядеть следующим образом.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  array = [];
  arr1:any;

  ngOnInit(){
    this.array = [1,2,3,4,5];
  }
  methodSplice(){
    this.array = this.array.splice(2,4);
  }

}

См. этот StackBlitz для рабочего примера.

Answer 2

HTML не изменяется, поскольку исходный массив не изменяется. «Метод splice () добавляет / удаляет элементы в / из массива и возвращает удаленные элементы.»

Я имею в виду, что метод splice создает новый массив и возвращает его.

Если вы хотите получить результат метода сращивания, присвойте его исходному массиву напрямую.

 methodSplice(){
   this.array= this.array.splice(2,4);
  }

Или, если вы хотите получить оставшуюся часть после метода сращивания, выполните следующие действия:

 methodSplice(){
   this.array.splice(2,4);
   this.array= this.array.slice();
 }

Или, может быть, вы можете использовать метод фильтра:

 methodSplice(){
   this.array= this.array.filter((i,v)=> i<=2);
 }

let array;
function resetTheArray(){ array = [1,2,3,4,5];}
resetTheArray();

console.log("Original array: " + array.toString());
array.splice(2,4);
//array=array.slice(); You need this to trigger your original array to say angular I am changed.
console.log("I am rest of splicing: "+ array.toString());

resetTheArray();
array=array.splice(2,4);
console.log("I am the removed part: "+ array.toString());

resetTheArray();
array = array.filter((i,v)=> i<=2); // you can add more conditions
console.log("I am the rest of filtering: "+ array.toString());

Answer 3

HTML не обновляется, поскольку angular обнаружение изменений работает только при изменении ссылки, а Array.splice () работает на месте (без изменения ссылки на массив после манипуляции) .

Кроме того, не делайте , если только вы не хотите, чтобы массив содержал удаленные элементы:

this.array = this.array.splice(2,4);

, поскольку splice() возвращает удаленные элементы и Я сомневаюсь, что это то, что вы хотите.

Вместо этого вы можете принудительно создать поверхностную копию массива, вызвав Array.slice () следующим образом:

  methodSplice(){
    this.array.splice(2,4);
    this.array = this.array.slice();
  }

Это изменит ссылку на массив, и angular должен принять изменения и обновить sh ваше представление (HTML).

Answer 4

Вы правильно склеили массив, но не присваивали его существующему массиву. Делай так.

methodSplice(){
   this.array= this.array.splice(2,4);
}