How not to render the list if it is empty?

Question

JavaScript

Guys, hello everyone!
there is such a code

<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>

it's autocomplete from material Angular
I put showPanel="false" isOpen="false" and it still throws an error: Cannot read property 'results' of null
How can anyone come across?

Answer 1

showPanel="false" isOpen="false"
will not affect anything, because ngFor will still be rendered. These options only define behavior.
it's all right?

<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>

But in general it is good to initialize the initial value somehow. To be an empty array.