javascript - 无法删除 [object Array] 的属性 '1'

Question

在我的组件中使用 Input 获取列表:

@Input() usersInput: Section[];

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

这是值列表:

    0:
     displayName: "بدون نام"
     firstName: null
     lastName: null
     title: 0
     userId: 1
   1:
     displayName: "محمدامین چهاردولی"
     firstName: "محمدامین"
     lastName: "چهاردولی"
     title: 0
     userId: 2

在 ngAfterViewInit 中，我将输入值设置为用户列表:

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

这是用户:

用户:Section[] = [];我在 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>

现在当我需要使用删除按钮时:

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

:

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

它告诉我这个错误:

ERROR TypeError: Cannot delete property '1' of [object Array]

有什么问题？？？我该如何解决？

Answer 1

我遇到过同样的问题，根据 this article问题是用户数组具有不可配置的属性。我想 Angular 输入设置为不可配置。当你这样做时:this.users = this.usersInput您只需将输入的引用传递给 this.users。 解决方案是在拼接之前简单地复制输入数组。在你的情况下:

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

顺便说一句。在 deleteUser 方法中执行此操作，而不是使用局部变量的 afterViewInit。您不需要引用同一对象的两个类 Prop 。