时间戳

首页 > 解决方案 > 从 Observable 的对象内部获取变量值

angular - 从 Observable 的对象内部获取变量值

问题描述

我正在尝试将一个变量分配给一个值，该值保存在我的打字稿文件中 Observable 的对象内。我能够将变量作为我的 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 值分配给打字稿文件中的变量 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循环成功解决了这个问题，然后我可以定义一个等于该值的选择标记。新的 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>

标签： angulartypescript

解决方案

如果你想更新你的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。

推荐阅读