У меня возникает следующая недоумение угловая проблема.
Редактировать: мне удалось воспроизвести это в примере Stackblitz, и обновил текст здесь.
Пример Stackblitz здесь .
Здесь показаны четыре набора из трех записей списка со значком удаления со следующими парами:
string input/passed from a getter
string input/passed from a field
array input/passed from a getter
array input/passed from a field
В случае массива / получателя , когда я щелкаю первый (из items1), на консоли ничего не регистрируется; но если щелкнуть по второму (из items2) или третьему (из items3), будет записано 'delete'. В остальных случаях всегда журналы удаляются, как и ожидалось.
Что здесь может происходить?
Код следует, хотя с Stackblitz легко играть.
Во-первых, родительский HTML, который устанавливает четыре случая:
String with getter
<hello [name]="name1">
</hello>
<hr/>
String without getter
<hello [name]="name2">
</hello>
<hr/>
Array with getter
<hello [names]="names1">
</hello>
<hr/>
Array without getter
<hello [names]="names2">
</hello>
и машинопись:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
get name1(): string {
return 'Angular';
}
name2 = 'Angular';
get names1(): string[] {
return ['Angular'];
}
names2 = ['Angular'];
}
А затем компонент HTML:
<mat-list>
<ng-container *ngFor="let item of items1">
<mat-list-item>
<h2 mat-line>Some Text</h2>
<button mat-icon-button (click)="delete()"><mat-icon>delete</mat-icon></button>
</mat-list-item>
</ng-container>
<ng-container *ngFor="let item of items2">
<mat-list-item>
<h2 mat-line>Some Text</h2>
<button mat-icon-button (click)="delete()"><mat-icon>delete</mat-icon></button>
</mat-list-item>
</ng-container>
<ng-container *ngFor="let item of items3">
<mat-list-item>
<h2 mat-line>Some Text</h2>
<button mat-icon-button (click)="delete()"><mat-icon>delete</mat-icon></button>
</mat-list-item>
</ng-container>
</mat-list>
и машинопись:
@Component({
selector: 'hello',
templateUrl: './hello.component.html',
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
@Input() names: string[];
items1: Number[] = [];
items2: Number[] = [];
items3 = [new Number(42)];
ngOnChanges() {
this.items1 = [new Number(42)];
this.items2 = [42];
}
delete() {
console.log('delete');
}
}