角度数组在控制台中有效，但在 dom 中无效

Question

感谢您的阅读。我是 Angular 初学者，遇到了第一个我无法解决的问题。我看了很多很多帖子都没有成功，抱歉。

如果我在一个组件中获取搜索短语并在另一个组件中处理它，我的搜索表单工作正常。 *ngFor 循环在 dom 和控制台中返回正确的结果数组：searchCustomer(phrase)。

如果我在另一个搜索表单中包含标题组件，则完全相同的搜索功能不起作用 - 尽管我通过控制台（！）获得了正确的结果。我通过 app-header 在 component.html 中包含了标头。

为什么包含数组“结果”正确的项目，但 dom 没有显示它？这是我的代码：

search.component.html：

<form #f = "ngForm" action="verification" method="get">  
 <input [(ngModel)] = "phrase" type="text" name="phrase">
 <button type="button" (click)="searchCustomer()">Search</button>
</form>

search.component.ts：

searchCustomer() {    
 this.dataService.setPhrase(this.phrase); //  store phrase     
 this.router.navigate(['/results']); // navigate
}

result.component.html：

<app-header></app-header>
<div class="col-md-6" *ngFor="let vs of results">
 ... 
</div>

result.component.ts：

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
// add ApiService
import { ApiService } from '../~services/api.service'; // ApiService
// add customers Model
import { Customer } from '../~interfaces/customers';
// DataService
import { DataService } from "../~services/data.service";


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

export class ResultComponent implements OnInit {

   // add array:
   results: Customer[];

   // add variable
  phrase: string;

  constructor(
    private apiService: ApiService, 
    private dataService: DataService,
    private cdr: ChangeDetectorRef
    ) {
  }

  ngOnInit() {
  }

  searchCustomer(phrase) {
    // search 
    this.apiService.searchCustomer(phrase).subscribe((result:Customer[]) => {
      this.results = result;
      console.log(this.results);

      this.cdr.detectChanges();
      }        
    )
  }

}

header.component.html：

<form #f = "ngForm">
  <input type="text" [(ngModel)] = "phrase" type="text" value="{{phrase}}">
  <button type="button" (click)="searchCustomer()">Search</button>
</form>

header.component.html：

searchCustomer(){ 
 this.dataService.setPhrase(this.phrase);   
 this.resultComponent.searchCustomer(this.phrase);
}

如果我从 Header 开始搜索，我可以在 Console 中看到正确的数组“结果”，但在 dom 中看不到。没有刷新。

感谢您大开眼界， 马蒂亚斯

Answer 1

这是 result.component.ts 中的解决方案

responsePage$: Observable<ResponsePage>;
     
ngOnInit() {
          this.apiService.searchCustomer(phrase).subscribe((result:Customer[]) => {
              this.results = result;
              this.searchCustomer(phrase);
        });}


searchCustomer(phrase) {
    this.responsePage$=this.apiService.customers(phrase);
}