How to Retrieve a List in My Components Using Input :
@Input() usersInput: Section[];
export interface Section {
displayName: string;
userId: number;
title: number;
}
Here is the Value List :
0:
displayName: "بدون نام"
firstName: null
lastName: null
title: 0
userId: 1
1:
displayName: "محمدامین چهاردولی"
firstName: "محمدامین"
lastName: "چهاردولی"
title: 0
userId: 2
In ngAfterViewInit, I assign the input value to the Users List:
ngAfterViewInit(): void {
this.users = this.usersInput;
if (this.users.length === 0) {
this.show = false;
} else {
this.show = true;
}
}
This is the Users List:
users: Section[] = [];
And it is used in an HTML list:
<div *ngFor="let item of users" class="d-flex selected-list-items mt-3">
<div class="col-md-5 col-lg-5 col-xs-5 col-sm-5 col-xl-5">
<label>{{item.displayName}}</label>
</div>
<div class="col-md-5 col-lg-5 col-xs-5 col-sm-5 col-xl-5">
<label> {{ getEnumTranslate(item.title)}}</label>
</div>
<div class="justify-content-center col-md-2 col-lg-2 col-xs-2 col-sm-2 col-xl-2">
<button (click)="deleteUser(item.userId)" mat-button>
<mat-icon aria-label="Delete" color="accent">delete</mat-icon>
</button>
</div>
</div>
When trying to use the delete button, I encounter the following issue:
<button (click)="deleteUser(item.userId)" mat-button>
<mat-icon aria-label="Delete" color="accent">delete</mat-icon>
</button>
In the TypeScript file:
deleteUser(id: number): void {
let userModel = {} as Section;
userModel = this.users.find(x => x.userId === id);
const index = this.users.indexOf(userModel);
this.users.splice(index, 1);
this.emitValueModel.push(
{
title: this.user.title,
userId: this.user.userId
}
);
this.selectedUserId.emit(this.emitValueModel);
if (this.users.length === 0) {
this.show = false;
}
this.cdref.detectChanges();
}
An error message is displayed:
ERROR TypeError: Cannot delete property '1' of [object Array]
What could be causing this problem? How can I resolve it?