ngfor уменьшение вложенного идентификатора метки в соответствии с количеством элементов - PullRequest
Новая
       53

ngfor уменьшение вложенного идентификатора метки в соответствии с количеством элементов

0 голосов
/ 24 октября 2019

У меня есть метка, в которой упоминается элемент, добавленный или удаленный ngFor, я знаю, что могу поставить индекс, но индекс продолжается без сброса.

Как

Элемент 1

Элемент 2 и т. Д.

Но при добавлении, затем удалении и добавлении снова

становится

Элементом 1

Участник 3

Я хочу, чтобы этот счет автоматически становился участником 1 и Участником 2

Пожалуйста, помогите, я все перепробовал.

Кнопки добавления и удаления расположены снаружиngFor div, чтобы они не реплицировались для каждой итерации. 

   <div formArrayName="demoArray" 
  *ngFor="let arrayItem of arrayItems; let i=index">
     <div> Member {{  i+1 }} </div>
  <input [id]="arrayItem.id" type="checkbox"
     [formControl]="demoArray[i]">
  <label [for]="arrayItem.id" class="array-item-title">
     {{arrayItem.title}}</label>

1 Ответ

0 голосов
/ 24 октября 2019

Чтобы достичь ожидаемого результата, используйте нижеприведенную опцию возврата измененного массива объектов обратно в исходный массив при удалении и добавьте новый объект в исходный массив при добавлении

component.ts 

    import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      arrayItems = [
        {id:1},
        {id:2},
        {id:3},
        ]
        delete(item){
          this.arrayItems = this.arrayItems.filter(v => v.id !== item.id)
        }
add(){
      this.id++;
      this.arrayItems.push({id: this.id})
    }
    }

Пример рабочего кода для справки - https://stackblitz.com/edit/angular-lszvvs?file=src/app/app.component.html

Обновлен стек с той же функциональностью, но с использованием одной кнопки «Добавить» и одной кнопки «Удалить» в соответствии с запросом SO - https://stackblitz.com/edit/angular-fix4bj?file=src/app/app.component.ts

...