Angular 从地图中获取应用程序组件中的值

Question

我尝试了几种方法，但无法在我的 app.component.html 中打印 valueM、ValueR 和 product 谁能给我一个解决方案或提示让我继续？ 非常感谢

app.component.ts

forkJoin(
      this.service1.method1(filter1),
      this.service2.methodo2(filter2),
      ).subscribe(data => { 

        const cc = data[0] || [];
        console.log(cc);
        const pp = data[1] || [];

        const arrayIdsProducts = pp.map(element => element.product);
        const sc = cc.filter(elemente => arrayIdsProducts.includes(elemente.product));
        console.log(sc);

        this.valuesC = sc.map(e => ({
        valueM: e.valueM,
        valueR: e.valueR,
        product: e.product
      }));

控制台日志

[{…}] 0: codigoSistemaFormatado: "0002.0004", id: 119 product: 5, productName: "T-SHIRT XYZ BLUE XL"

[{…}] 0：产品：5，ValueM：31.053333333333335，valorR：49.9

app.component.html

  <table formArrayName="productos" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th width="5%" class="text-center">ValueM</th>
        <th width="30%" class="text-center">ValueR</th>
        <th width="9%" class="text-center">Produte</th>
        <th width="7%"></th>
      </tr>
    </thead>
<tr [formGroupName]="i" *ngFor="let item of formGroup.controls.produtos.controls; let i=index; last as isLast; first as isFirst">

      <td>
        {{i+1}}
      </td>

      <input hidden formControlName="unidadeNome">
      <input hidden formControlName="codigoSistemaFormatado">
      <input hidden formControlName="ValueM"> >
      <input hidden formControlName="valueR"> 

      
      <td>
        <app-vo-filtro-produtos (valueSelected)="onProductChanged($event, i)" [showLabel]="false" [multiple]="false"
          formControlName="produto" [itens]="produtos[i]"></app-vo-filtro-produtos>
      </td>

      <td>
        <input type="text" value="{{produtos[i].codigoSistemaFormatado}}" class="form-control" disabled="true">
      </td>

      <td>
        <input type="text" value="{{produtos[i].unidadePrincipal?.unidade.sigla}}" class="form-control" disabled="true">
      </td>


      <td>
        <input type="text" value="{{valueM HERE}}" class="form-control" disabled="true">
      </td>

      <td>
        <input type="text" value="{{valueR HERE}}" class="form-control" disabled="true">
      </td>
       </td>
    </tr>
  </table>
</form>

Answer 1

由于您需要访问动态分配的valuesC 值，您应该像这样访问它：

<input type="text" [value]="valuesC.valueR" >

更新：

如果我理解正确，您将拥有一个单独的数组作为 valueC，它将具有 productId 值与 valueR 和 valueC 的映射。

然后最好在我们的 ts 文件中编写单独的方法以从 valueC 数组返回产品特定值，如下所示：

ts 文件：

getValue(productId, key) {
      for(let product of this.valueC) {
        if(productId == product.product) {
          return product[key];
        }
      }
   }

读入html文件，如：

<input type="text" [value] = "getValue(<REPLCAE_WITH_PRODUCT_ID>, 'valueM')">
<input type="text" [value] = "getValue(<REPLCAE_WITH_PRODUCT_ID>, 'valueR')">