Question

在Angular Materials文档中，有一个API可以使用有用的功能来处理该组件，例如https://material.angular.io/components/list/api

有没有办法在组件打字稿代码中获取该对象？例如，在我的组件中，我想听取selectChange事件。我尝试了下面的代码，但是它说myComponent

上没有myOptionId

html的

  <mat-selection-list>
    <mat-list-option *ngFor="let item of list"  #myOptionID>
      {{item.id}}
    </mat-list-option>
  </mat-selection-list>

.TS

  constructor() {
    this.selectionEvents = this.myOptionID.selectChange;
  }

  selectionEvents: EventEmitter<MatSelectionListOptionEvent>;

有没有办法获得对组件内部的材质对象的引用，以便我可以在打字稿代码中用它做什么？

P.S：我知道代码会进入模板，如

(selectChange)="onChange($event)"

但我还想根据后端的逻辑更改所选的选项，所以我想访问组件代码中的整个对象

Answer 1

在你的组件中，

// grab the MatListOption instances..
@ViewChildren(MatListOption) options: QueryList<MatListOption>;

并在你的ngOnInit或ngAfterViewInit中......

ngOnInit() {
    this.someService.getData(data => {
        // say you want to check the third one.
        this.options.toArray[2].selected = true;
    })
}

A stackblitz demo，我可以抓住选项的实例，在代码三秒后我查看第三个菜单列表。我希望能解决你的问题。

请注意

<mat-list-option (selectChange)="onChange($event)" value="bananas">Bananas</mat-list-option>

仍然无法正常运作，因为在当前的2.0.0-beta.12上，他们从未在.emit上调用selectChange它只是坐在那里什么都不做。 code

但正如在master分支上看到的那样，他们已将selectChange更改为selectionChange，他们实际上已调用.emit，因此它应该在master上工作。 code

如何在组件TS代码中使用API

1 个答案: