材料选择框不显示ngModel-Angular2的绑定值

我正在使用一个材质对话框组件，其中包含一些材质输入框/选择框

问题是：

当对话框打开时，它从调用方组件接收到一个模型，该模型被复制到dialogLocalModel中，并通过双向绑定绑定到html。 除了最后一个绑定外，其他绑定都非常有效。 这里的区别是，我们在模型内部的对象类型上使用ngModel

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

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

以下是代码的核心部分：

调用该对话框的组件

对话框组件调用

绑定到TS逻辑的对话框的HTML

---

由于我们正在处理select中的一个对象，Angular不知道如何匹配array catAssetList中的localAssetModel.category，因为它们彼此没有引用

您可以选择使用创建引用。查找：

this.localAssetModel.category=this.catAssetList.findx=> x、 categoryId==this.data.assetModel.category.categoryId； 但这意味着您需要在回调中调用initLocalModel，因此我们确信catAssetList具有值，即do:

.thenres=>{ this.catAssetList=res； this.initLocalModelthis.data.mode； } .catcherror=>AppHTTPService.handleErrorPromiseerror； 另一个选项是使用compareWith：

在TS中：

比较项目1，项目2{ 返回item1.categoryId==item2.categoryId； }

---

我直接尝试了第二种选择，效果非常好。谢谢！没问题，很高兴我能帮忙！：

 [...]
         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;

    }

<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>