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

我有2个组件叫:

1)list (used to display customer list)

2)detail (used to display customer details)

这两个组件是通用组件,所以我在另一个名为 customer 的组件中使用这些组件 . 它将显示如下图所示:

enter image description here

list 组件上单击特定客户名称(前客户一)时,我在 details 组件上显示客户值(例如名称和年龄)(i,e客户详细信息) . 此方案正常运行 .

But i want first list-item(i,e customer one) to be highlighted and its value(i,e name and age) to be displayed on the details component by default. 像这样:

enter image description here

Stackblitz链接

回答(1)

2 years ago

加载 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