材质选择框未显示与 ngModel 绑定的值 - Angular2

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
        }

已调用对话框组件

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 逻辑的对话框的 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 不知道如何匹配数组 catAssetList 中的 localAssetModel.category，因为它们之间没有相互引用。

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

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

但这意味着您需要在回调then 中调用initLocalModel，因此我们确定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;
}