Невозможно сфокусироваться на матовой карточке, используя видоискателей Angular

Question

Я пытаюсь сфокусироваться на конкретной карте из списка матовых карт

Но я продолжаю получать ошибку

Невозможно прочитать свойство 'focus' из неопределенного

Код Stackblitz

Должен добавить золотой контур при нажатии кнопки

import { Component, OnInit, QueryList, ElementRef, ViewChildren } from '@angular/core';

/**
 * @title Basic cards
 */
@Component({
  selector: 'card-overview-example',
  templateUrl: 'card-overview-example.html',
  styleUrls: ['card-overview-example.css'],
})
export class CardOverviewExample implements OnInit {

  comments: number[];
  @ViewChildren("commentCard") commentCardList: QueryList<ElementRef>;

  ngOnInit() {
    this.comments = [1, 2, 3, 4, 5, 6, 7, 8];
  }

  focus() {
    const elementRef = this.commentCardList.find((item, index) => index === 4);
    elementRef.nativeElement.focus();
//this.commentCardList[4].nativeElement.focus();

  }

}

Answer 1

Во-первых, вам нужно назначить идентификатор представления, чтобы показать, какие элементы вы хотите запросить

<mat-card #commentCard *ngFor="let comment of comments" tabindex="0">Comment {{comment}}</mat-card>

Далее: MatCard не имеет nativeElement, поэтому вам нужно получить ссылку на элемент

@ViewChildren("commentCard", { read: ElementRef }) 

И все готово

https://stackblitz.com/edit/angular-gu5kpe-bbsmbu?file=app%2Fcard-overview-example.ts

Answer 2

1. "CommentCard" в @ViewChildren("commentCard") должен ссылаться на что-то, поэтому вам нужно указать либо тип компонента / директивы, либо переменную шаблона.Переменная шаблона означает, что вы добавляете #name в html-тег, например:

   <mat-card #commentCard *ngFor="let comment of comments" tabindex="0">Comment {{comment}}</mat-card>

2. Вам также нужно сообщить @ViewChildren, что выхотите получить элемент DOM, а не угловой компонент, например @ViewChildren("commentCard", { read: ElementRef }) commentCardList: QueryList<ElementRef>;

https://stackblitz.com/edit/angular-gu5kpe-dqua65?file=app%2Fcard-overview-example.ts