如何获得对单个 Angular 组件的可寻址性？

Question

环境： Angular 7 使用 ng-select 组件。

场景： *ngFor 创建一个 ng-select 组件列表如下：

<div *ngFor="let address of addresses">
  <ng-select    
     [items]="address.cities"
     bindLabel="name"
     bindValue="id">
  </ng-select>
</div>

ng-select 组件有我需要调用的方法。我如何获取 ngSelect 实例的每个实例以便从模型端调用这些方法。

我能够在 DOM 中看到分解的 htmlelements 但我不想遍历 DOM 我只想调用某些 ng-select 方法但是不要' 知道如何从模型中获取组件的实例。

方法调用的一个例子是：

instanceOfNgSelect.HandleClear();

我想要访问从 *ngFor 创建的任何实例...

Answer 1

如果我没理解错的话，你想打4个中的第2个？如果是这样，您是否尝试在循环时启动索引？ *ngFor="auth of authors, let i = index;"，这样就可以传索引，根据索引来识别。

Answer 2

鉴于：

<div *ngFor="let address of addresses">
  <ng-select    
     [items]="address.cities"
     bindLabel="name"
     bindValue="id">
  </ng-select>
</div>

获取上述任何 ng-selects 的可寻址性的最佳方法是在模型中使用 ViewChildren 装饰器：

@ViewChildren(NgSelectComponent) NgSelectComponents: QueryList<NgSelectComponent>;

然后在 ngAfterViewInit() 中：

  this.NgSelectComponents.forEach(ngselect=>{
     debugger;
    });

如何获得对单个 Angular 组件的可寻址性？

How to get addressibility to individual Angular components?

javascript

angular-ngselect

angular