Angular 选择不绑定变量的ngmodel

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

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

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

new-transaction.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>

transaction.service.ts

account.ts

import { User } from "./user";

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

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

***编辑

---

我认为您缺少使用

ngValue

指令来获取对象 反映在绑定到

ngModel

的值中

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

目标客户
{{a.name}}

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

请参阅此处，以获取有关

---

注意：我不确定为什么它似乎在

sourceAccount

属性上工作。

我使用以下代码得到了这个结果。我喜欢Garth发布的内容，而且代码也会更少。我在看到他的答案几分钟后就准备好了，所以我打算把它贴出来，因为我花了一些时间在上面

new-transaction.component.html

---

是的，这个解决方案也会起作用-我在字段中使用过很多。但是正如你所说，更多的代码用于这个特定的场景。你能看到刚才添加的图片吗？当我选择帐户时，我没有定义对不起，忽略我最后的评论。这是一个打字错误，你回答了我的问题。另外，如果您不介意，为什么在我选择帐户后，选择框中没有显示所选的选项？我在使用的代码中没有看到这个问题。当我在account下拉列表中选择某个内容时，它会显示我选择的内容。我没有在我的项目中添加任何样式，但我怀疑这样做可能会影响任何东西。

import { Account } from "./account";

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

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

import { User } from "./user";

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

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

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

<div>
  <div>
  <label>Source Account</label>
  <select [(ngModel)]="sourceBankAccount" name="sourceBankAccount" (change)="sourceAccountChanged($event.target.value)" >

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

export class NewTransactionComponent implements OnInit {

  accounts: BankAccount[];
  transaction: Transaction = new Transaction();
  sourceBankAccount: number;
  targetBankAccount: number;

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

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

  sourceAccountChanged(account: number) {
    const newAccount: BankAccount = this.accounts.find(acct => acct.id === +account);
    if (newAccount) {
      this.transaction.sourceAccount = new BankAccount(newAccount);
    }
  }

  targetAccountChanged(account: number) {
    const newAccount: BankAccount = this.accounts.find(acct => acct.id === +account);
    if (newAccount) {
      this.transaction.targetAccount = new BankAccount(newAccount);
    }
  }

  addTransaction(): void {
    console.log(this.transaction);
    this.transactionService.addTransaction(this.transaction)
    .subscribe(
      (transaction) => {
        this.transaction = transaction;
      }
    );
  }
}