@if @else（或 *ngIf）问题和变更检测

Question

我有一个具有条件逻辑的组件，在其 html 文件中使用标志上的 @if （或 *ngIf）条件，例如 @if (model.editable) 或 ，它显示一组真实条件的控件另一个为 false。

在打字稿文件的 ngOnChanges 中，我调用一个服务方法，该方法返回具有多个属性（包括可编辑属性）的模型。其他属性绑定到各种不同的控件属性，例如，。

@if (model?.editable) {
<ng-container ngModelGroup="wbs">
    <app-field-dropdown #wbsProgram
                        id="project-wbs-wbsProgramId"
                        name="wbsProgramId"
                        [field]="PMBField.ProjectSummaryProgram"
                        [required]="true"
                        [options]="wbsPrograms"
                        (change)="getWbsChildren(wbsProgram.name)"
                        ngModel />
   <!--Other controls-->
</ng-container>
}
@else {
<app-field-text-input id="project-wbs-wbsProgramName"
                      [field]="PMBField.ProjectSummaryProgram"
                      [readonly]="true"
                      [value]="model?.wbsProgramName" />

   <!--Other controls-->
}

ngOnChanges(changes: SimpleChanges): void {
        if (changes["projectId"]?.previousValue !== this.projectId) {
            if (this.projectId) {
                this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                    this.model = response;
                    // Other code
            });
            } else {
                this.model = undefined;
                // Other code
            }
        }
    }

如果 @Input 值发生变化并触发 ngOnChanges 中的代码从服务器检索新模型，并且 model.editable 属性发生变化，例如从 true 变为 false 或反之亦然，我似乎遇到了控制值不存在的绑定问题正在更新并反映正确的值，即，未在输入控件上设置 model.wbsNumber。如果触发 ngOnChanges 时 model.editable 属性没有更改，则不会发生这种情况。这些值在用户界面中正确更新。

我确信它与 @if 导致的动态控件构造有关，但我不知道为什么它不起作用以及如何获取它以便控件反映 ui 中的正确值。

谢谢。

Answer 1

从您的代码片段来看，似乎当 API 获取完成时，不会触发更改检测以使用新的属性值更新视图 (

model

)。您可以通过这种方法手动激活更改检测

readonly cdr = inject(ChangeDetectorRef)

ngOnChanges(changes: SimpleChanges): void {
        if (changes["projectId"]?.previousValue !== this.projectId) {
            if (this.projectId) {
                this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                    this.model = response;
                    this.cdr.detectChanges();
            });
            } else {
                this.model = undefined;
                // Other code
            }
        }
    }