代码之家 › 专栏 › 技术社区 › bluePearl

expressionchangedafterithasbeencheckederror ngif值已更改

angular

0

bluePearl · 技术社区 · 7 年前

在我的代码中,我得到了ngif值更改错误,并且不确定正确的方法是什么。这是我的HTML:

<div *ngIf="currentVlaue">
            <div class="section-body">
                <div class="form-group">
                    <label>Name</label>
                    <input [(ngModel)]="currentValue.name"
                           type="text"
                           class="form-control" required />
                </div>
           </div>
</div>

在我的组件中,我有:

public currentValue: ValueModel;
@Input() public values: ValuesModel[];

constructor(){}  

ngOnInit(){}  

ngOnChanges(changes: SimpleChanges){
let indexOfValues = "someValue";
        if (changes[indexOfValues ] &&
            changes[indexOfValues ].indexOfValues  &&
            changes[indexOfValues ].previousValue !== changes[indexOfValues ].currentValue) {
            if (this.values && this.values.length > 0) {
                this.indexOfValues  = this.actions[0];
            }
        }
}

我还有addValue、editValue、deleteValue和saveValue方法。我能解决这个错误吗?

2 回复 | 直到 7 年前

1

Suresh Kumar Ariya 7 年前

您需要使用属性默认值(空)创建模型currentValue。同时请删除ngif代码。

public currentValue: ValueModel = {
   name: ''
};
@Input() public values: ValuesModel[];

constructor(){}  

ngOnInit(){}

https://stackblitz.com/edit/angular-9ywghz?file=src%2Fapp%2Fapp.component.ts

2

-1

RANJIT PATRA 7 年前

原因: ExpressionChangedAfterItHasBeenCheckedError 如果触发更改检测并计划更新视图,并且在这两者之间的值发生更改,则会出现此问题。

解决方案1: 在中运行应用程序时将出现此错误 development 模式,不在 production 模式。在 main.ts 我们可以在哪里 enableProdMode() 之前 bootstrapping 你的主模块。

// will enableProdMode condition
enableProdMode();


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

解决方案2 :在中手动调用更改检测 ngAfterViewInit .

constructor(private cd: ChangeDetectorRef) {}

ngAfterViewInit() {
   this.cd.detectChanges();
}