Question

我使用了一个材质对话框组件，里面有一些材质输入框/选择框。

问题在于：

当对话框打开时，它从调用者组件接收一个在dialogLocalModel中复制的模型，该绑定到具有双向绑定的html。除最后一个绑定外，绑定工作得很好。这里的不同之处在于我们在保留在模型中的对象类型上使用ngModel。

有人可以解释为什么，当我进入对话框时，我可以看到第一个和第二个输入从绑定中填充好，但第三个输入仍然是空白的，即使它已经存储了信息（即对象）。

我不知道我是否清楚地解释了我的问题。如果你怀疑某事，问问我什么。为简单起见，我将在以下代码中留下一些注释。

以下是代码的核心部分：

拨打对话的组件

 [...]
         public editAsset(model){ //this method open the dialog

            let dialogRef = this.dialog.open(AssetsDialogComponent, <MatDialogConfig>{
                width: '80%',
                data: {
                    mode : "edit",
                    /*
                    passing the data model (with this shape)
                    model = {index:string ,denomination: string,category :object }
                    */
                    assetModel : model 
                }
            });

            //other part that work after closing of the dialog
        }

DIALOG COMPONENT CALLED

export class AssetsDialogComponent implements OnInit {

public localAssetModel = {
    id : null,
    index: '',
    denomination: '',
    category: <CatAssets> null,
};

public catAssetList: CatAssets[];

constructor(private assetsService: AssetsService,
            private catService: CategorieService,
            public dialogRef: MatDialogRef<AssetsDialogComponent>,
            @Inject(MAT_DIALOG_DATA) public data: any) {
}

ngOnInit() {
    this
        .catService
        .getCategories(CategoryTypes.Assets)
        .then(res => {
            this.catAssetList = res;
        })
        .catch(error => AppHTTPService.handleErrorPromise(error));

    this.initLocalModel(this.data.mode);
}

private initLocalModel(mode) {

    if(mode == "edit"){
        this.localAssetModel.id = this.data.assetModel.id;
        this.localAssetModel.index = this.data.assetModel.index;
        this.localAssetModel.denomination = this.data.assetModel.denomination;
        this.localAssetModel.category = this.data.assetModel.category;

    }

绑定到TS LOGICS的对话HTML

<div class="col-lg-4">
            <fieldset class="form-group">
                <mat-form-field>
                    <mat-select
                        placeholder="Categoria Asset"
                        [(ngModel)]="localAssetModel.category"
                        name="category"
                        required
                    >
                        <mat-option *ngFor="let category of catAssetList" [value]="category" >
                            {{category.categoryId}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </fieldset>
        </div>

Answer 1

由于我们正在处理您的选择中的对象，因此Angular不知道如何匹配数组localAssetModel.category中的catAssetList，因为它们没有相互引用。

您可以选择使用.find()创建参考：

this.localAssetModel.category = this.catAssetList.find(x => 
     x.categoryId === this.data.assetModel.category.categoryId);

但这意味着您需要在回调initLocalModel中调用then，因此我们确信catAssetList具有值，即：

.then(res => {
    this.catAssetList = res;
    this.initLocalModel(this.data.mode);
})
.catch(error => AppHTTPService.handleErrorPromise(error));

另一种选择是使用compareWith：

<mat-select [(ngModel)]="localAssetModel.category" [compareWith]="compareWithFn">

并在TS中：

compareFn(item1,item2){
  return item1.categoryId == item2.categoryId;
}

材料选择框未显示带有ngModel的绑定值 - Angular2

1 个答案: