首页 文章

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

提问于
浏览 次
1

我有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链接

angular typescript angular6 angular-components

1 回答

  • 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

    回复于

相关问题