Impossible de supprimer la propriété '1' de [objet Array].

Question

Obtenir la liste avec Input dans mes composants :

@Input() usersInput: Section[];

export interface Section {
    displayName: string;
    userId: number;
    title: number;
}

et voici la liste des valeurs :

    0:
     displayName: " "
     firstName: null
     lastName: null
     title: 0
     userId: 1
   1:
     displayName: " "
     firstName: ""
     lastName: ""
     title: 0
     userId: 2

sur ngAfterViewInit J'ai défini la valeur d'entrée à la liste des utilisateurs :

ngAfterViewInit(): void {
    this.users = this.usersInput;
    if (this.users.length === 0) {
        this.show = false;
    } else {
        this.show = true;
    }
}

Il s'agit des utilisateurs :

users: Section[] = []; et je l'utilise dans la liste html :

<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>

maintenant quand j'ai besoin d'utiliser le bouton de suppression :

  <button (click)="deleteUser(item.userId)" mat-button>
       <mat-icon aria-label="Delete" color="accent">delete</mat-icon>
  </button>

ts :

    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();
}

il me montre cette erreur :

ERROR TypeError : Impossible de supprimer la propriété '1' de [l'objet Array].

Quel est le problème ? Comment puis-je le résoudre ?

Answer 1

J'ai été confronté au même problème et selon cet article Le problème est que le tableau de l'utilisateur a des propriétés non configurables. Je suppose que les entrées angulaires sont définies comme non configurables. Quand vous le faites : this.users = this.usersInput vous passez simplement la référence de l'entrée à this.users . La solution est de simplement copier le tableau d'entrée avant l'épissage. Dans votre cas :

    this.users = [...this.usersInput];

En fait, faites-le dans la méthode deleteUser plutôt que dans afterViewInit avec une variable locale. Vous n'avez pas besoin de deux classes props se référant au même objet.

Answer 2

Essayez :

deleteUser(id) {
    const index = this.users.findIndex(x => x.userId === id);
    this.users.splice(index, 1);
}

Démonstration de travail

Answer 3

Cet article indique ce que vous devez faire pour résoudre ce problème. En gros, vous devez spécifier que l'élément de l'index dans le tableau que vous voulez supprimer est configurable. Il suffit donc d'indiquer

Object.defineProperty( array , index you want to delete, { configurable : true } );

Article : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element