Обновление списка страниц Angular HTML после обновления массива не происходит

Question

У меня есть простой метод поиска внутри компонента, который обновляет массив для удовлетворения. Однако при обновлении массива список, который должен появиться на странице html, просто не появляется.

Вот мой TypeScript:

export class AccommodationOverviewComponent implements OnInit {



    private resultMessage: string;
       private city: string;
       private inputvalue: string;
       accommodations: Array<Accommodation> = [];
       constructor(private accommodationService: AccommodationService, private router: Router, private route: ActivatedRoute, private changeDetection: ChangeDetectorRef) { }

      ngOnInit(): void {
      }

      getAllAccommodations()
      {
        this.accommodationService.getAllAccommodations()
        .subscribe(
          data => {
            console.log(data);
            this.accommodations = data;

          },
          error => {
            console.log(error);
            this.resultMessage = "Something went wrong";
          });
      }

      searchByCity(){
        this.city = (<HTMLInputElement>document.getElementById("searchbarCity")).value;
        this.accommodationService.getAccommodationByCity(this.city)
        .subscribe(
          data => {
            console.log(data);
            this.accommodations = data;
            console.log(this.accommodations);
            this.changeDetection.detectChanges();
          },
          error => {
            console.log(error);
            this.resultMessage = "Something went wrong"
          }
        )
      }

    }

, а здесь HTML:

 <div class="row">
    <div class="col">
      <div class="header-text">
        <h1>Find the desired accommodation</h1>
      </div>
    </div>
</div>

<div class="form-row">
  <div class="form-input">
    <label>Enter the city in which you want to find accommodations.</label>
    <input id="searchbarCity" type="text" value="" (submit)="searchByCity()"/>
    <button (click)="searchByCity()">Search</button>
  </div>
</div>


  <div class="form-row">
    <div class="form-input">
        <tr *ngFor="let accommodation of accommodations">
          {{accommodation.Country}} 
          {{accommodation.City}}
          {{accommodation.StreetandNumber}}
          {{accommodation.PostalCode}}
          {{accommodation.Size}}
          {{accommodation.PeopleAllowed}}
          {{accommodation.PrizePerNight}}
          {{accommodation.Roof}}
          {{accommodation.Ground}}
          {{accommodation.OwnerId}}
        </tr>
    </div>
  </div>

Я знаю, что большинство людей получают свои данные в onInit, но я хочу обновлять свой массив только после того, как будет выполнен поисковый запрос, чтобы пользователю не приходилось хранить огромный набор данных, который в основном можно увидеть в метод getall. Так как это для проекта с большой базой пользователей в качестве критериев.

Я хочу обновить список страниц HTML, когда массив данных в машинописном тексте изменится. Я хочу получить эти данные только после того, как сделан поисковый запрос (что он делает отлично). Возможно ли это вообще и если да, то что я делаю не так?