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

Question

我有 2 个组件称为：

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

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

这两个组件是通用组件，所以我在另一个名为 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