Как сделать по умолчанию выбор первого элемента в мат-списке в angular

Question

Я хочу знать, как сделать выбор по умолчанию первым элементом списка матов в angular. Я пытался, но не смог решить. Код моего списка матов здесь

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, let i = index" [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 Материалам , mat-list-item не имеет выбранного свойства ввода, которое можно применить к элементу. однако mat-list-option делает.

как таковой, если вы переключитесь на использование mat-list-option, вы можете использовать свойства [selected] и [value]