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

Question

Environment: Angular 7 using the ng-select component.

Scenario: A *ngFor which creates a list of ng-select components as follows:

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

The ng-select component has methods which I need to call. How do I get each instance of ngSelect instance in order to call those methods from the model side.

I am able to see the decomposed htmlelements in the DOM but I don't want to traverse the DOM I just want to call certain ng-select methods but don't know how to get an instance of the component from the model.

An example of a method call would be:

instanceOfNgSelect.HandleClear();

I would want access to any of the instances created from the *ngFor...

Answer 1

if I understood correctly, you want to call second one out of 4? if so, did you try initiating index when looping? *ngFor="auth of authors, let i = index;", that case you can pass the index and identify based on the index.

Answer 2

Given:

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

The best way to get addressibility to any of the ng-selects above is in the Model using the ViewChildren decorator:

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

Then in ngAfterViewInit():

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