Question

我试图基于属性值显示数组中的单个对象。

我的交易项列表具有accountId属性，但是我想显示帐户名。所有帐户都加载到accounts $数组中。我只是不知道如何正确使用我的getAccountById函数

这是组件类

export class NewtransactionComponent implements OnInit {
  transaction$: Transaction;
  tempItem$: TransactionItem;
  accounts$: Array<Account>;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.transaction$ = new Transaction();
    this.data.getAccounts().subscribe(data => this.accounts$ = Object.assign(new Array<Account>(), data));
    this.tempItem$ = new TransactionItem();
    this.transaction$.TransactionDate = new Date();
  }

  addItem(){
    this.transaction$.TransactionItems.push(this.tempItem$);
    this.tempItem$ = new TransactionItem();
  }

  getAccountById(id):Account{
    return this.accounts$.find(x => x.id === id);
  };

这是html视图，显示错误“无法读取未定义的属性'名称'”

     <div class="items-container">
        <mat-form-field>
          <input matInput placeholder="Amount" [(ngModel)]="tempItem$.Amount">
        </mat-form-field>
        <mat-form-field *ngIf="accounts$">
          <mat-select placeholder="Account" [(ngModel)]="tempItem$.AccountId">
            <mat-option *ngFor="let account of accounts$" [value]="account.id">{{account.name}}</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select placeholder="Credit/Debit" [(ngModel)]="tempItem$.CreditDebit">
            <mat-option value="Credit">Credit</mat-option>
            <mat-option value="Debit">Debit</mat-option>
          </mat-select>
        </mat-form-field>
        <button mat-mini-fab color="primary" (click)="addItem()">Add</button>
      </div>
      <table *ngIf="transaction$.TransactionItems.length">
        <tr>
          <th>Amount</th>
          <th>Account</th>
          <th>Credit/Debit</th>
        </tr>
        <tr *ngFor="let item of transaction$.TransactionItems">
          <th>{{item.Amount | currency}}</th>
          <th>{{getAccountById(item.AccoundId).name}}</th>
          <th>{{item.CreditDebit}}</th>
        </tr>
      </table>

这些是帐户和交易项目数据模型以供参考

export class Account {
    Id: string;
    Name: string;
    Category: string;
    SubCategory: string;
}

export class TransactionItem{
    Id: number;
    TransactionId:number;
    Accountid: string;
    Amount: number;
    CreditDebit: string;
}

Answer 1

我认为错误在这里：{{account.name}}？

这很可能是时间问题。在从订阅中检索数据之前，该页面将尝试显示。

解决此问题的一种方法是使用*ngIf

 <div class="items-container" *ngIf="account">

这样，在检索数据之前，页面不会尝试显示。

另一种选择是使用安全导航操作符：

{{account?.name}}

如果帐户为空或未定义，问号告诉Angular不要尝试读取name属性。

编辑：

如果此处存在错误：{{getAccountById(item.AccountId).name}}，则表明getAccountById(item.AccountId)未定义或为空。您的一笔交易可能没有账户吗？

更仔细地查看代码，JavaScript / TypeScript区分大小写。因此，如果您使用以下方式声明ID：

Id: string;

（大写字母I）

您随后无法使用：

return this.accounts$.find(x => x.id === id);

（小写）

Angular如何从HTML数组中显示单个对象

1 个答案: