如何默认选择角度中mat-list中的第一项

Question

我想知道如何默认选择角度中垫列表的第一项。我尝试过但无法解决它。我的垫子列表代码在这里

export class StationsListComponent implements OnInit {

  @Input() stations: Stations[];
  selectedStation: Stations;

  constructor() { }

  ngOnInit(): void {
    this.selectedStation = this.stations[0];
  }
}

<mat-list role="list">
  <div *ngFor="let book of Books">
    <mat-list-item id="{{book.bookId}}" role="listitem" class="list-item" routerLink="/home/{{book.bookId}}" [routerLinkActive]="['is-active']">
      <div class="station-div">
          <div class="station-name">{{book.bookName}}</div>
          <div class="station-location">{{book.authorName}}</div>
      </div>
    </mat-list-item>
  </div>
</mat-list>

Answer 1

您可以使用“mat-selection-list”并通过编辑 [selected] 值来指定默认选择哪个条目：

<mat-selection-list #itemList>
    <mat-list-option *ngFor="let item of items; index as i" [selected]="item && i === 0">
      #{{i+1}} {{ item.name }}
    </mat-list-option>
</mat-selection-list>

在这种情况下，默认情况下会选择第一个项目，因为 [selected]="item && i == 0"。如果将“i == 0”更改为“i == 1”，则会选择第二项，依此类推。

Answer 2

根据 Angular Material Docs，

mat-list-item

没有可应用于元素的选定输入属性。然而

mat-list-option

确实如此。

因此，如果您切换到使用 mat-list-option，您可以利用属性

[selected]

和

[value]