nz-zorro常见报错快速定位

listOfSelectedValue.filter is not a function

• 常见错误1：nz-select出现默认值和所需要类型对上不。例如下拉多选，但是默认值却不是数组。

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

• 组件某些数据状态在页面渲染完成，还对数据进行了修改。
• 常见错误1：ngAfterViewInit生命钩子对数据状态进行修改
• 解决方案：
  • 1，可以考虑使用setTimeout延迟修改，或者使用ChangeDetectorRef来手动触发变更检测。
  • 2，使用ChangeDetectionStrategy.OnPush禁止变更检测代替
    • @Input() 属性发生变化时会触发；markForCheck() 方法显式告诉 Angular 该组件及其子组件可能需要更新

ngIf导致控件校验提示消失

• *ngIf 的条件为 false 时，包裹在 *ngIf 内部的元素会被完全移除，包括其中的表单控件，从而导致错误提示无法展示。
• 看个示例代码

<form nz-form #f="ngForm" se-container="2">
  <se label="App Key">
    <input 
        *ngIf="show" 
        type="text" 
        nz-input 
        [(ngModel)]="i.ak" 
        name="ak" 
        required 
        error="请输入"
    >
  </se>
  <se>
    <button nz-button nzType="primary" [disabled]="f.invalid">Save</button>
  </se>
</form>
export class ComponentsSeBasicComponent implements OnInit { 
    show = false 
    i: { ak?: string } = {};
    ngOnInit() {
        // 模拟状态改变
        setTimeout(()=>{
            this.show = true
        },1000)
    }
}

• 解决方案：
  • 手动展示提示

  <se label="App Key" required>
      <input 
          *ngIf="show" 
          type="text" 
          nz-input 
          [(ngModel)]="i.ak" 
          name="ak" 
          required 
          error="请输入"
      >
       <div *ngIf="show && !i.ak" class="text-red-6">请填写</div>
  </se>
  

官方文档地址 angular.dev/errors