Как не рендерить список, если он пустой?

Question

[Николай Семенов]

Есть такой код:

<mat-form-field class="example-full-width">
        <input type="text" matInput placeholder="serch" [matAutocomplete]="auto" [formControl]="searchStr">
        <mat-autocomplete #auto="matAutocomplete" showPanel="false" isOpen="false">
          <mat-option (onSelectionChange)="selectedFilm(film)" *ngFor="let film of films.results" [value]="film.title">
            <img class="example-option-img" aria-hidden [src]="getUrlImage(film.poster_path)" height="25">
            <span>{{film.title}}</span>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

Это autocomplete из material Angular.
Ставлю showPanel="false" isOpen="false", а он все равно бросает ошибку:

Cannot read property 'results' of null

Как быть?

Answer 1

[Антон Швец]

showPanel="false" isOpen="false"
ни на что не повлияет, потому что ngFor все равно будет рендериться. Эти параметры определяют только поведение.

так пойдет?

<mat-form-field class="example-full-width">
        <input type="text" matInput placeholder="serch" [matAutocomplete]="auto" [formControl]="searchStr">
        <mat-autocomplete #auto="matAutocomplete" showPanel="false" isOpen="false" *ngIf="films?.results?.length">
          <mat-option (onSelectionChange)="selectedFilm(film)" *ngFor="let film of films.results" [value]="film.title">
            <img class="example-option-img" aria-hidden [src]="getUrlImage(film.poster_path)" height="25">
            <span>{{film.title}}</span>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

а вообще хорошо начальное значение инициализировать как-то. Чтобы был пустой массив.

Comments

[Николай Семенов]

так и сделал - инициализировал и норм

Answer 2

[msdosx86]

Просто объяви в компоненте public films = [];