無法將組件渲染到 DOM - Angular

Question

我有以下組件。 沒有它一切正常。 但是當我嘗試在 app-root 中渲染這個組件時，我的其他組件（比如我的帶有谷歌地圖的組件）不會渲染。

這是組件的代碼：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable} from 'rxjs';
import { startWith} from 'rxjs/operators';
import {map} from 'rxjs/operators';

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

export class AutocompleteComponent implements OnInit {
searchTerm = new FormControl();

cities: string[] = ['Novi Sad', 'Beograd', 'Nis'];

filteredCities!: Observable<string[]>;

constructor() { }

ngOnInit(): void {
this.filteredCities = this.searchTerm.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);
}

private _filter(value:string): string[] {
const filterValue = value.toLowerCase();
return this.cities.filter(city => city.toLowerCase().includes(filterValue));
}

}

我收到以下錯誤：

編輯：html 文件

<form class="cities-form">
    <mat-form-field appearance="fill">
        <mat-label>Gradovi</mat-label>
        <input 
        type="text"
        id="searchTerm"
        placeholder="Izaberi"
        aria-label="Izaberi grad"
        matInput
        [formControl]="searchTerm"
        [matAutocomplete]="auto"/>

        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let city of filteredCities | async"
            [value]="city"> {{city}}</mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

這是 autocomplete.component.html

<h1>Geoapify Map</h1>
<my-map></my-map>

<h1>Forma</h1>
<app-autocomplete></app-autocomplete>

這是 app.component.html

Answer 1

導入以下模塊

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})