Для отображения первого значения элемента списка из mat-selection-list в другом компоненте по умолчанию

Question

У меня есть 2 компонента, которые называются:

1) список (используется для отображения списка клиентов)

2) деталь (используется для отображения сведений о клиенте)

Эти два компонента являются общими компонентами, поэтому я использую эти компоненты внутри другого компонента, называемого customer . Который будет отображаться, как показано на изображении ниже:

Здесь, щелкая конкретное имя клиента (бывшего клиента) на компоненте list, я отображаю значения этого клиента (например, имя и возраст) на компоненте details(i, e Сведения о клиенте). Этот сценарий работает нормально.

Но я хочу, чтобы был выделен первый элемент списка (например, клиент), а также его значение (например, имя и возраст)по умолчанию для компонента сведений. , например:

Stackblitz Link

Answer 1

Вы можете выдать первое значение после загрузки ListComponent.

ц

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