angular - 选择 ngmodel 不绑定(bind)变量

Question

我有一个非常简单的页面，其中有两个选择填充了相同的数据(银行帐户)。一个旨在成为源，另一个目标是为了创建交易。在这个简单的场景中，交易只是从一个账户转移到另一个账户的金额。

我在将交易发送到我的休息服务时遇到问题。从下图中很容易看出事务变量没有正确填充，但我不知道出了什么问题。

我看到交易中的第一个帐户(源)部分填充，第二个帐户(目标)使用 [object Object]。为什么没有填充相同的对象，因为它们是完全相同类型的对象，为什么第一个名称没有填充？

新事务.html:

<div>
  <div>
  <label>Source Account</label>
  <select [(ngModel)]="transaction.sourceAccount"> 

      <option *ngFor="let a of accounts" [value]="a" >{{a.name}}</option>
  </select>
</div>
<div>
  <label>Target Account</label>
  <select  [(ngModel)]="transaction.targetAccount" > 
      <option *ngFor="let a of accounts" [value]="a">{{a.name}}</option>
  </select>
</div>
<div>
  <input type="text" [(ngModel)]="transaction.amount">
</div>
<div>
    <button (click)="addTransaction()">Add</button>
 </div>
</div>

new-transaction.component.ts

...
export class NewTransactionComponent implements OnInit {

  accounts: Account[];
  transaction: Transaction = new Transaction();

  constructor(private accountService: AccountService, private transactionService: TransactionService) { }

  ngOnInit(): void {
    this.transaction.targetAccount = new Account();
    this.transaction.sourceAccount = new Account();

    this.accountService
    .getAllAccounts()
    .subscribe(
      (accounts) => {
        this.accounts = accounts;
      }
    );
  }

  addTransaction(): void {
    this.transactionService.addTransaction(this.transaction)    
    .subscribe(
      (transaction) => {
        this.transaction = transaction;
      }
    );
    //this.router.navigate(['/home']);
  } 
}

transaction.service.ts

...

  public addTransaction(transaction: Transaction): Observable<Transaction> {
    return this.http
      .post(API_URL + '/transaction', transaction)
      .map(response => {
        return new Transaction(response.json());
      })
      .catch(this.handleError);
  }

transaction.ts

import { Account } from "./account";

export class Transaction {
    idtransaction: number;
    amount: number;
    sourceAccount: Account;
    targetAccount: Account;

    constructor(values: Object = {}) {
      Object.assign(this, values);
    }
}

account.ts

import { User } from "./user";

export class Account {
    id: number;
    name: string = '';
    user: User[] = [];

    constructor(values: Object = {}) {
      Object.assign(this, values);
    }
}

***已编辑

Answer 1

我认为您在这里缺少使用 ngValue 指令来拥有对象 反射(reflect)在绑定(bind)到 ngModel 的值中。

<label>Target Account</label>
<select  [(ngModel)]="transaction.targetAccount" > 
    <option *ngFor="let a of accounts" [ngValue]="a">{{a.name}}</option>
</select>

从文档.. 如果您的选项值恰好是对象(并且您希望将表单中的选择保存为对象)，请改用 ngValue。

查看此处查看 select element. 的完整文档

注意，我不确定为什么它似乎对 sourceAccount 属性起作用。