ChangeDetectorRef 和 ChangeDetectionStategy 未重新渲染答案

【问题标题】：ChangeDetectorRef and ChangeDetectionStategy is not Re-RenderingChangeDetectorRef 和 ChangeDetectionStategy 未重新渲染
【发布时间】：2023-01-31 12:03:02
【问题描述】：

免责声明，这是我的第一个 Angular 项目。对我如此赤裸。

我想要的是带有输入的多个表，以根据下拉菜单更改行数：

当红色圈出的下拉列表发生变化时，每个表中的行数都会发生变化。

下拉菜单在一个组件中。每个表都是其自己的组件（app-input-tables），使用了四次。它是这样设置的：

    <select class = "dropDown" #types (change)="onSelected(types.value)">
       options...
    </select>
    </div>
    <div><app-input-table></app-input-table></div>
    <div><app-input-table></app-input-table></div>
    <div><app-input-table></app-input-table></div>
    <div><app-input-table></app-input-table></div>

“onSelected”方法如下所示：

    inputs1: InputTableComponent = new InputTableComponent()
    inputs2: InputTableComponent = new InputTableComponent()
    inputs3: InputTableComponent = new InputTableComponent()
    inputs4: InputTableComponent = new InputTableComponent()

    onSelected(value:string): void {
    this.inputs1.typeEntry(value);
    this.inputs2.typeEntry(value);
    this.inputs3.typeEntry(value);
    this.inputs4.typeEntry(value);
    }

应用程序输入表 html 如下所示：

<div>
  <label>SINT</label>
  <table>
    <tr *ngFor="let row of inputs; let i = index; trackBy:trackByFn">
      <td> <input class = "inputValues" [(ngModel)]="inputs[i]" (keyup.tab)="valueEntry()" /></td>
    </tr>
  </table>
</div>

我的 trackByFn 和 typeEntry 方法如下所示：

  trackByFn(index: any, item: any){
    return index;
  }

  typeEntry(selectedType: string) {
    if (selectedType == "BOOL")
      this.inputs = Array(8).fill(0);
    else
      this.inputs = Array(1).fill(0);

    this.changeDetection.detectChanges()
  }

所以我希望 *ngFor 在下拉菜单更改时更新。

所以我尝试按照here的说明进行操作：

我一直在尝试遵循答案中给出的“ChangeDetectorRef”建议。如果我执行以下操作：

constructor(
    private changeDetection: ChangeDetectorRef
  ) { }

我收到以下编译时错误：“未提供 'changeDetection' 的参数。”

如果我将 changeDetection 参数从构造函数移动到私有字段：

export class InputTableComponent implements OnInit {
  inputs: number[] = [];
  private changeDetection: ChangeDetectorRef

我没有收到编译时错误。但是当它读取“this.changeDetection.detectChanges()”行时，我会收到一个运行时错误：

  typeEntry(selectedType: string) {
    if (selectedType == "BOOL")
      this.inputs = Array(8).fill(0);
    else
      this.inputs = Array(1).fill(0);

    this.changeDetection.detectChanges()
  }

错误是：“无法读取未定义的属性（读取‘detectChanges’）”

我不确定我做错了什么。我已经导入了 ChangeDetectorRef：

import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';

我也尝试过 ChangeDetectionStrategy.Default。这是该页面上的另一个答案，但这也无济于事。

任何帮助都会很棒。谢谢。

【问题讨论】：

为什么要实例化 InputTableComponents 以及最终在哪里使用实例化的 InputTableComponents ？在我看来，您似乎根本不使用inputs1、inputs2 等？您是否期望 inputs1 会自动映射到第一个 <div><app-input-table></app-input-table></div> ？
顺便说一句：我建议您创建一个 stackblitz-example。这将使其他用户更容易解决您的问题。
我想我确实假设了。这个想法是四个表是四个实例。我想我需要实例化它们以使用该类的四个副本。我不是吗？
这与其说是一种假设，不如说是一种“没想到”。但是谢谢你。我想我对组件如何相互通信有很大的盲点。我会相应地研究并修复我的代码。如果这不能解决问题，我会将其发布到 stackblitz。再次感谢。
好的，我做了你建议的研究。我猜我将 app-input-table 类实例化了八次，并且我使用了四个未连接到 html 文件的类。所以我删除了手动实例化的类。并添加 @inputs 装饰器，链接父子属性，一切都与 ngOnChanged 方法一起工作。感谢您的帮助，并让我知道我哪里出错了。

标签： angular angular-changedetection

【解决方案1】：

事实证明我的问题与我使用变化检测的方式无关。我的问题是我如何尝试引用一个组件中的其他组件。我在打字稿文件中实例化了一个类（不是组件），却没有意识到组件本身没有实例化。

所以我遵循了这里描述的指南：https://angular.io/guide/inputs-outputs

并完全重组我的项目以符合这些准则。这样做之后，我就能够使用 ngChange 接口来检测我需要的更改。

【讨论】：