Добавляйте и удаляйте компонент динамически из mat-list в Angular 7

Question

В одном из моих угловых компонентов у меня есть mat-list, который я хочу использовать для отображения списка дочерних компонентов.Я хочу, чтобы пользователь мог добавить компонент в этот список, нажав кнопку под списком, и удалить компонент из списка, нажав кнопку удаления на самого компонента.

Для контекста создаваемый / удаляемый дочерний компонент является компонентом, который связан с хранением информации о диапазоне IP-адресов.Он содержит два входа, один для начального диапазона и один для конечного диапазона.

У меня работает функция добавления, но способ ее реализации не выглядит правильным.В настоящий момент у меня есть способ удержания массива объектов IpRange (простой объект, содержащий две строки), а затем с помощью *ngFor я генерирую новый компонент каждый раз, когда объект добавляется в этот массив.Компонент генерируется через @Input ipRange: IpRange в дочернем компоненте.

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

ParentTemplate

<div class="row">
            <div class="col-12">
                <mat-list>
                    <app-add-ip-dialog *ngFor="let ipRange of ipRanges" [ipRange]="ipRange"></app-add-ip-dialog>
                </mat-list>
            </div>
        </div>

ParentComponent

export class ParentComponent implements OnInit{

  ipRanges: IpRange[];

  constructor() {}

  ngOnInit() {
    this.ipRanges = [];
  }

  addIpRange(): void {
    this.ipRanges.push({startingRange: '', endingRange: ''});
    console.log(this.ipRanges);
  }
}

ChildComponent

export class AddIpDialogComponent implements OnInit, OnChanges {

  @Input() ipRange: IpRange;

  constructor(){}

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(this.ipRange.startingRange + ' : ' + this.ipRange.endingRange);
  }
}

Интерфейс IpRange

export interface IpRange {
    startingRange: string;
    endingRange: string;
}

Что я хочучтобы быть в состоянии сделать, это создавать новый компонент каждый раз, когда пользователь нажимает кнопку добавления, тогда каждый компонент может отслеживать свои startingRange и endingRange посредством двусторонней привязки.

Затем, когда пользователь хочет удалить один из этих компонентов, ему просто нужно нажать кнопку удаления на компоненте, а затем он удаляет его из списка матов.

Answer 1

Я предлагаю использовать Service в качестве централизованного хранилища данных для распространения данных ipRanges на ваши компоненты:

@Injectable({providedIn: 'root'})
export class IpRangesService() {
 ipRanges: ipRange[];
 ngOnInit() {
    this.ipRanges = [];
  }

  addIpRange() {
    this.ipRanges.push({startingRange: '', endingRange: ''});
    console.log(this.ipRanges);
  }
  removeIpRange(index) {
    this.ipRanges.slice(index,1);
  }
  getIpRangeData() {
    return this.ipRanges
  }
}

Затем распространить их на ваш родительский компонент

В родительском файле ts:

export class ParentComponent implements OnInit{

  ipRanges: IpRange[];

  constructor(private ipRangeService : IpRangeService) {}

  ngOnInit() {
    this.ipRanges = this.ipRangeService.getIpRangeData();
  }
}

В родительском HTML-шаблоне передайте свойство index вашему ребенку, и оно будет действовать как идентификатор для ваших дочерних компонентов:

<div class="row">
    <div class="col-12">
        <mat-list>
            <app-add-ip-dialog 
                *ngFor="let ipRange of ipRanges, let i = index" 
                [ipRange]="ipRange"
                [id]="i"> 
            </app-add-ip-dialog>
        </mat-list>
    </div>
</div>

Теперь вы можете использовать этот индекс от вашего ребенкакомпонента, удалите себя, используя метод removeIpRange(), предоставленный вышеуказанным сервисом:

export class AddIpDialogComponent implements OnInit, OnChanges {

  @Input() ipRange: IpRange;
  @Input() id: number;
  constructor(private ipRangeService : IpRangeService){}

  ngOnInit() {
  }

  //function that listen to the remove click event
  onRemoveButtonClicked() {
     this.ipRangeService.removeIpRange(id);
  }
}

Answer 2

это должны быть отдельные компоненты? Недавно я сделал нечто очень похожее, когда вы смогли составить список файлов для загрузки в форме, и я встроил в него функцию добавления / удаления ввода, которая создала бы новый ввод для каждого загружаемого файла, и когда данные публикуются, они отправляются. в массиве. Этот маршрут может быть проще. дайте мне знать, если вы захотите внести это изменение, и я покажу вам код. Я сделал это, используя Угловой материал Reactive Forms