以角度在页面加载时突出显示第一个列表项值作为默认值答案

【问题标题】：To highlight the first list-item value as default on page load in angular以角度在页面加载时突出显示第一个列表项值作为默认值
【发布时间】：2019-05-07 18:09:32
【问题描述】：

我有 2 个组件：1)contact2)display。

contact 组件用于显示联系人列表，如下图所示：

另一个组件“显示”，我将它放在contact 组件的右侧，如下所示：

现在在列表中的changing/clicking 联系人上（即在联系人组件中）。我在右侧组件（即 display 组件）上显示特定的联系人数据（即电子邮件、性别...），如第二张图片所示。

现在的问题是：

我想默认突出显示第一个联系人。
第一个突出显示的联系人数据（即电子邮件、性别...）将显示在右侧（即显示组件上）如第二张图像中。。李>

联系方式组件代码

HTML

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

SCSS

.selected {
  background-color:blue;
 }
.selected span{
  color:red;
 }

import {Component ,EventEmitter ,Input ,Output, ViewChildfrom 
 '@angular/core';  
import { IContact } from 'src/app/models/app.models';

@Component({
 selector: 'app-contact',
 templateUrl: './contact.component.html',
 styleUrls: ['./contact.component.scss'],
})

export class ContactComponent {

@Input()
  public contacts:  IContact[] ;
@Output() public select: EventEmitter<{}> = new EventEmitter(); 

 public currentContact: IContact;

public ngOnInit(): void {
 if (this.contacts && this.contacts.length > 0) {
   this.currentContact = this.contacts[0];
   this.select.emit(this.currentContact);
  }
}

public onSelect(contact: IContact): void {
  this.currentContact = contact; 
  this.select.emit(contact); 
 }

}

显示组件代码

HTML

 <div>
  <tr>
      <td>Email </td>
      <td>{{contact?.eMailAddresses}} </td>
  </tr>
  <tr>
      <td>Gender</td>
      <td>{{contact?.gender}} </td>
  </tr>
 </div>

import {Component, EventEmitter, Input , Output, ViewChild} from 
 '@angular/core';  
import { IContact } from 'src/app/models/app.models';

@Component({
 selector: 'app-display',
 templateUrl: './display.component.html',
 styleUrls: ['./display.component.scss'],
})

export class DisplayComponent {

 @Input()
  public contact: IContact;

}

Stackblitz DEMO

【问题讨论】：

你在 ngOnInit 工作中发射吗？如果没有，你可以试试ngAfterViewInit。提出一个 stackblitz 来展示你的问题。
emit inside ngOnInit 工作正常，我可以看到更改意味着单击下一个联系人我可以在显示组件上看到他们的信息（即电子邮件、性别）。
emit inside ngOnInit 工作正常，然后我看不到问题。也许你错过的一些微不足道的东西放了一个样本。
意味着您需要stackblitz 链接？？
是的，没错

标签： angular typescript angular6

【解决方案1】：

尝试添加 ngOnChanges 以跟踪联系人，因为 ngInint contacts 尚未加载。

代码：

import { Component, Input, Output, EventEmitter, SimpleChanges, OnInit, ViewChild } from '@angular/core';

 ngOnChanges(changes: SimpleChanges) { 
  if (this.contacts && this.contacts.length > 0) { 
     this.currentContact = this.contacts[0]; 
     this.select.emit(this.currentContact); 
    } 
 }

【讨论】：