從 Observable 中的 object 內部獲取變量值

Question

我正在嘗試將一個變量分配給一個值，該值保存在 typescript 文件中的 Observable 中的 object 中。 我能夠在我的 HTML 文件中將變量作為值返回，所以我知道我可能遺漏了一些非常明顯的東西，我認為解決方案與雙向綁定有關，但我只是無法讓它工作. 任何幫助將不勝感激。 我的代碼如下：

import { Component, OnInit } from '@angular/core';
import { AppState } from '../store';
import { State, Store } from '@ngrx/store';
import { NgForm } from '@angular/forms';
import * as fromCurrencies from '../store/actions/currencies.actions';
import { Currency } from '../Models/currency';
import { Observable } from 'rxjs';
import * as fromSelectors from '../store/selectors/currencies.selectors';
import { selectCurrency } from '../store/selectors/currencies.selectors';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  constructor(private store: Store<AppState>) {}
  public currency$: Observable<Currency>;
  public conversionRate: number;
  public convertedAmount: number;
  ngOnInit(): void {}

  OnSubmit(form: NgForm) {
    console.log('currency: ' + form.value.symbol);
    this.store.dispatch(
      fromCurrencies.findCurrency({
        symbol: form.value.symbol,
      })
    );
    this.currency$ = this.store.select(fromSelectors.selectCurrency);
    this.convertedAmount = form.value.amount * this.conversionRate;
  }
}

界面：

  id: number;
  symbol: string;
  name: string;
  conversionRate: number;
}

我想將 Currency 中的 conversionRate 值分配給 typescript 文件中的變量 conversionRate 。 我還將添加 realted HTML，我知道如何獲得價值。

<div>
  <form #form="ngForm" (ngSubmit)="OnSubmit(form)">
    <div class="currency-type">
      <label for="symbol">Symbol</label>
      <input
        type="text"
        name="symbol"
        ngModel
        required
        id="symbol"
        class="form-control"
        placeholder="enter symbol"
      />
    </div>
    <div>
      <label for="amount">Amount (€): </label>
      <input
        type="number"
        name="amount"
        ngModel
        required
        id="amount"
        class="form-control"
        placeholder="enter amount"
      />
    </div>
    <button
      type="submit"
      [disabled]="form.invalid"
      class="btn btn-primary btn-lg btn-block"
    >
      <span>Calculate Currency</span>
    </button>
  </form>
</div>

<table *ngIf="currency$ | async as currencyInfo">
  <thead>
    <tr>
      <th>Symbol</th>
      <th>Name</th>
      <th>Conversion Rate</th>
      <th>Amount (Euro)</th>
    </tr>
  </thead>
  <tr *ngFor="let curr of currencyInfo">
    <td>{{ curr.symbol }}</td>
    <td>{{ curr.name }}</td>
    <td>{{ curr.conversionRate }}</td> //value I want to assign in ts file
    <td>{{ conversionRate }}</td>
  </tr>
</table>

編輯：我已經通過在表格中使用for循環成功解決了這個問題，然后我可以定義一個等於該值的 select 標記。 新的 HTML 代碼如下所示：

<div *ngIf="currency$ | async as currencyInfo">
  <form #form="ngForm" (ngSubmit)="OnSubmit(form)">
    <div class="currency-type">
      <label for="symbol">Symbol</label>
      <input
        type="text"
        name="symbol"
        ngModel
        required
        id="symbol"
        class="form-control"
        placeholder="enter symbol"
      />
    </div>
    <div>
      <label for="amount">Amount (€): </label>
      <input
        type="number"
        name="amount"
        ngModel
        required
        id="amount"
        class="form-control"
        placeholder="enter amount"
      />
    </div>
    <div>
      <label>Conversion Rate:</label>
      <select
        *ngFor="let curr of currencyInfo"
        name="rate"
        type="number"
        id="rate"
        ngModel
        class="form-control"
        value="{{ curr.conversionRate }}"
        id="rate"
      >
        <option>
          {{ curr.conversionRate }}
        </option>
      </select>
    </div>
    <button
      type="submit"
      [disabled]="form.invalid"
      class="btn btn-primary btn-lg btn-block"
    >
      <span>Calculate Currency</span>
    </button>
  </form>
</div>

<table *ngIf="currency$ | async as currencyInfo">
  <thead>
    <tr>
      <th>Converted Amount</th>
    </tr>
  </thead>
  <tr *ngFor="let data of currencyInfo">
    <td>{{ convertedAmount }}</td>
  </tr>
</table>

Answer 1

如果您想更新您的curr.conversionRate那么您可以使用input並使用[(ngModel)]進行綁定，如下所示=>
HTML：

<tr *ngFor="let data of currencyInfo">
    <td>{{data.name}}</td>
    <td>
        <tr>
            <input type="number" (ngModelChange)="dataChanged(data,$event)" [(ngModel)]="data.conversionRate">
        </tr>
    </td>
    <td>{{data.conversionRate }}</td>
</tr>

TS：

dataChanged(data,$event){
   //console.log(data);
   //console.log($event);
  }

注意：這是一個演示鏈接，您可以查看 => Stackblitz Link 。