Предупреждения при использовании [ngClass]

Question

У меня есть компонент с именем contact-list.Этот компонент используется для отображения списка контактов с таким фото:

• Как показано на рисунке, по умолчанию я выделил первымконтакт (i, e background -color и text-color элемента списка изменены).
• И я показываю эту выбранную информацию о контактах на правой стороне, используя другой компонент под названием display, например:

Вот contact-list КОД компонента:

HTML

 <mat-selection-list>
    <mat-list-option [ngClass]="{selected : 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>

TS

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

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

 export class ContactListComponent {

  @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); 
   }

 }

Этот сценарийу меня работает нормально: но в консоли я получаю это предупреждение:
Что не так с [ngClass]?

Answer 1

У вас должна быть дополнительная проверка undefined объекта, прежде чем вы получите доступ к свойству object.Вы можете изменить свой код следующим образом -

<mat-list-option 
     [ngClass]="{selected : contact && currentContact && contact.fullName == currentContact.fullName}"  
     *ngFor="let contact of contacts">