Question

我在canDeactive（）函数下面有此函数，如果表单中有未保存的数据，它将提醒用户。

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean{
                if(this.recipe.name!=this.recipeEditForm.get('name').value || 
                this.recipe.imagePath!=this.recipeEditForm.get('imagePath').value ||
                this.recipe.description!=this.recipeEditForm.get('description').value ||
                this.recipe.ingredients!=this.recipeEditForm.get('ingredients').value &&
                !this.changesSaved){
                  return confirm('Do you want to abandon the changes ?');
                }
                else{
                  return true;
                }
              }

其中ingredients = new FormArray([]);

食谱类

export class Recipe{
    public name:string;
    public description:string;
    public imagePath:string;
    public ingredients:Ingredient[]
    constructor(name:string,desc:string,imagePath:string,ingredients:Ingredient[]){
        this.name=name;
        this.description=desc;
        this.imagePath=imagePath;
        this.ingredients=ingredients;
    }
}

成分类

export class Ingredient{
    constructor(public name:string,public amount:number){

    }
}

在控件到达 if 内部的formArray之前，它一直运行良好，在这种情况下，该属性为 ingredients 。该控件始终位于if块内部，并且即使我不更改表单中的任何内容，也始终会收到警报。

在调试时，我发现它的发生是因为以下条件被评估为true，无论我是否在该字段中进行任何更改。

this.recipe.ingredients!=this.recipeEditForm.get('ingredients').value

当我打印这两个值时，我发现它们的类型不同。一种是对象数组，另一种是成分数组。因此，我认为这可能是导致此问题的原因。

console.log(this.recipe.ingredients);
console.log(this.recipeEditForm.get('ingredients').value);

作为解决方法，我编写了一个单独的函数来比较成分，并在我的canDeactivate方法中使用此函数，而不是直接比较成分。一切正常，我再也看不到上述问题。

compareIngredients(ing:Ingredient[],editedIng:Object[]){
    if(ing.length!==editedIng.length){
      return false;
    }else{
      for(let i=0;i<ing.length;i++){
        if(ing[i]['name']!==editedIng[i]['name']||ing[i]['amount']!==editedIng[i]['amount']){
          return false;
        }

      }
      return true;
    }

  }

但是我知道，这个解决方案看起来很脏。所以我这里有2个查询。

为什么这个问题确切出现。
没有这种肮脏的解决方法的最佳解决方案。

比较formArray与角度6中的数组

0 个答案: