*ngFor 路由器出口没有更新列表答案

【问题标题】：*ngFor no updating list on router-outlet*ngFor 路由器出口没有更新列表
【发布时间】：2021-01-25 14:48:53
【问题描述】：

我在 appComponent 上有这个结构：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

在<router-outlet> 上，我的主要组件（'/'）是Home-component。

我在Home-component有一个表格

<div class="col-md-3 col-sm-3" *ngFor="let stock of stocks">

我想更改表头中关于我的选择器的表格。

<select class="input-select" [(ngModel)]="familyProductSelected" (change)="onChange()" 
                             [ngModelOptions]="{standalone: true}" [value]="familyProductSelected">

我有一个onChange() 方法。此方法从 header 调用，并引用 Home Component 方法。

onChange() {
 this.homeComponent.loadProduct(this.familyProductSelected);
}

这个更新stocks 列表的方法工作正常，并且数组正确更新，但视图没有更新它。

我尝试使用 this.stocks = [...this.stocks];、trackBy、this.stocks= Object.assign({}, this.stocks); 和 ChangeDetectorRef。这些都不适合我。最后一个，我收到NullInjectorError

main.ts:13 NullInjectorError: StaticInjectorError(AppModule)[HomeComponent -> HeaderComponent]: 
StaticInjectorError(Platform: core)[HomeComponent -> HeaderComponent]: 
NullInjectorError: No provider for HeaderComponent!

我该如何解决这个问题？这是我对 Angular 的第一个问题，如果我需要添加更多信息，请告诉我。

【问题讨论】：

this.homeComponent.loadProduct(this.familyProductSelected) 你是如何在 header 组件中初始化 homeComponent 的？
是否有声明 HeaderComponent 的模块？是否有声明 HomeComponent 并导入 HeaderModule 的模块？
@Kshitij 我在 header.component.ts 的 costructor 上做 public homeComponent: HomeComponent,
@Marco 是的。唯一不起作用的是“主页组件”中的表格视图。即使列表“股票”正在更新，我也看不到视图中的变化。
你能把你的代码放到 Stackblitz 上吗？这样我们就可以看一看了。 @蛤蜊

标签： angular typescript ngfor

【解决方案1】：

在 app.module.ts 中导入 HeaderComponent，然后在 @ngModule 中的导入数组中将以下粗体代码添加到您的app.module.ts

**import { HeaderComponent} from 'your_path_to_componenet'**;

@NgModule({ declarations: [**HeaderComponent**] }) export class AppModule{ }

NullInjectorError 将解决并且您的代码应该可以正常工作

【讨论】：

当我尝试在 Home-Component 上添加 ChangeDetectorRef 时出现 nullInjectorError。如果没有 ChangeDetectorRef，所有代码都可以正常工作，列表正在正确更新，但视图（HTML 中的表格）没有更新。在我的 app.module.ts 上，我已经将所有组件添加到 @NgModule 声明中

【解决方案2】：

您可以使用 Service 方式在组件之间发送数据，这在下面的帖子中进行了说明：

How to communicate between component in Angular?

如果您想手动重新渲染 HomeComponent 的视图，请使用 ChangeDetectorRef

【讨论】：

问题不在于方法，而在于您所说的重新渲染。但是当我尝试使用 ChangeDetectorRef 时，正如我在帖子末尾解释的那样，我收到一个错误 NullInjectorError，我猜这是因为 Home-component 属于
您可以尝试在完成语句后调用 HomeComponent 中的 ChangeDetectorRef 方法，就像在您的 AppComponent 中一样作为验证测试。也许，创建一个包含 ChangeDetectorRef 的 utils 方法以实现 DRY。也尝试使用其他方法。