Angular get value in the app component coming from a map

Question

I tried several ways and I was unable to print the valueM, ValueR and product in my app.component.html Can anyone give me a solution or tip for me to proceed? thank you very much

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
      }));

Console.log

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

[{…}] 0: product: 5, ValueM: 31.053333333333335, valorR: 49.9

app.compontent.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

As you need to access valuesC value which is assigned dynamically, you should access it like:

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

Update:

If I understood it correctly, you will be having separate array as valueC which will have mapping of productId values with valueR and valueC .

Then better to write separate methods in our ts file to return product specific valu from valueC array like this:

ts file:

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

Read in html file like:

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