Question

我的角度编码有一个愚蠢的问题。我想在sidenav组件中创建（或编辑）一些对象，在Angular Material表中显示它们，然后通过REST将它们存储在后端。实际上，创建和编辑对象是可行的。但是该表显示为空值。甚至我的save方法（save（myObject：MyObject））都显示（已经填充）myObject在任何地方都有空值。但是，数据似乎到达了我的后端，因为所有数据在重新加载后都能正确显示。

我已经尝试过用表组件中的EventEmitter替换sidenav组件的@Input（）绑定，该组件将对象发送到sidenav组件中进行编辑的对象（如果要添加一个，则为空）。同样的问题在这里：它显示了预填写的输入表单，编辑似乎可以工作，但是填写blanc对象似乎会使我的数据丢失（但无论如何都会到达后端）。对我来说，它似乎绑定到某种基础对象，而不是绑定到的对象。奇怪的console.log图片：problem

TableComponent.html：

<mat-sidenav-container>
  <mat-sidenav> 
    <inventory-table-quickview [_itemToShowInSidenav]="_selectedObject"> 
    </inventory-table-quickview>
  </mat-sidenav>
 <button (click)="add()">Add</button>
 <mat-sidenav-content>
   <mat-table> ....
  //... (some table stuff)
 <button (click)=editObject(element)>Edit</button>
 </mat-table>
</mat-sidenav-container>
...(some more stuff)

TableComponent.ts：

 @ViewChild(MatSidenav) sideNav: MatSidenav;
 public _selectedObject: MyObject;
....
public editObject(myObj: MyObj){ 
// local copy, as I don't want the table object to be edited
  this._selectedObject = {
    assignee: assignee,
    ...
    someMoreFields: new Map())
    };
    myObj.forEach((value, key) => { 
      this._selectedObject.details.set(key, value); 
    });
}

public add(){
  this._selectedObject = {
  assignee: "",
  .....
  details: new Map())};
}

...(some more stuff happening here)

MySidenavComponent（ImvemtoryTableQuickview）HTML：

<div>
  <mat-form-field>
    <mat-label>Field1</mat-label>
    <input [(ngModel)]="_itemToShowInSidenav.assignee" matInput/>
  </mat-form-field>
</div>
  <ng-container>
    <div>
      <mat-form-field>
        <mat-label >{{ someLabel }}</mat-label>
        <input [ngModel]="_itemToShowInSidenav.details.get("myKey")"
          (ngModelChange)="_itemToShowInSidenav.details.set("myKey", $event.valueOf())" matInput/>
      </mat-form-field>
    </div>
  </ng-container>
<button (click)="save(_itemToShowInSidenav)">Save</button>

TS：文件：

@Input() public _itemToShowInSidenav: MyObject;

constructor(){
...
}

public save (item: MyObject){
 ... //some saving process)
}

}

预期是我将项目传递给eddit（或一个空的项目），填写数据，保存并一切正常。

角度数据绑定无法按预期工作

0 个答案: