NgIf, async pipe 'as' 并为局部变量分配新值

Question

Straight to the code since the question is probably unclear.

Template:

<ng-container *ngIf="attributes$ | async as attributes">
  <div *ngFor="let attribute of attributes; let i = index">
    <input [(ngModel)]="attribute.key" [name]="'attribute-key' + i">
    <button (click)="deleteAttribute(attributes, attribute.key)"></button>
  </div>
</ng-container>

Code behind:

deleteAttribute(attributes: EquipmentAttribute[], key: string) {
  console.log(attributes);
  attributes = attributes.filter(x => x.key != key)
  console.log(attributes);
}

Lets say the array has 2 elements. First console.log outputs [first, second] . Second console.log outputs [first] . Template still shows 2 elements. If I click again on the button, I get the same result.

Why is that so? Is attributes passed as a copy? If I subscribe to the observable and assign the result in the code behind instead of using the async pipe, everything works.

What's weird is that if I use attributes.splice(0, 1), changes are reflected in the template. I'm really confused.

Can anyone explain how this works?

Answer 1

filter returns a new array, and when you assign it back to 'attributes', it gets lost when the function ends

splice works because you are splicing the array 'attributes' is pointing TO.

To accomplish what you want cleanly, you have to tell whatever the source of the attributes$ observable, that a delete happened.