默认情况下，要在另一个组件中显示mat-selection-list中的第一个列表项值

Question

我有2个组件，称为：

1）列表（用于显示客户列表）

2）详细信息（用于显示客户详细信息）

这两个组件是通用组件，所以我在称为 customer 的另一个组件中使用这些组件。如下图所示：

在这里单击list组件上的特定客户名称（例如，一个客户），我在details组件（即“客户详细信息”）上显示该客户值（例如，姓名和年龄）。情况很好。

但我希望默认情况下突出显示第一个列表项（即客户一个），并将其值（即名称和年龄）显示在详细信息组件上。 ：

Stackblitz链接

Answer 1

一旦加载ListComponent，您就可以发出第一个值。

ts

export class ListComponent {

  ngOnInit() {
    if (this.contacts && this.contacts.length > 0) {
      this.select.emit(this.contacts[0]);  //<-- emit the first value
    }

  }

html

  <mat-selection-list  #contact>
        <mat-list-option 
      [ngClass]="{selected : contact.name == currentContact.name}"  
      *ngFor="let contact of contacts">
            <a mat-list-item (click)="onSelect(contact)"><span>{{ contact.name }}</span> </a>
        </mat-list-option>
      </mat-selection-list>

这是工作副本-https://stackblitz.com/edit/list-examples-mine-mgshnt