Loop on an object-CodePudding

In the internal-transfer-details page, I have a table with two columns: I have a numerical value and a hyperlink.

illustration 1

illustration2

If I click on the first link, I want to retrieve in the HTML table, the value 840.

I get to the internal-transfer-watch page and I get a lot of rows. I just want to retrieve a row. (the value 840)

illustration 3

ID is 347075

illustration 4

The JSON file is here.

internal-transfert-details.component.ts (parent)

export class InternalTransfertDetailsComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  internalTransfertDetails: InternalTransfertDetails[] = [];

  constructor(private service: InternalTransfertDetailsService, private router: Router) { }


  ngOnInit(): void {
    this.getTransfert()
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private getTransfert(): void {

    this.service.getTransfert().pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        
        this.internalTransfertDetails = res.TRANS.map(
          internalTransfertLine => {
            return {
              titre: {
                label: internalTransfertLine.TITRE.LABEL,
                isin: internalTransfertLine.TITRE.ISIN,
                svm: internalTransfertLine.TITRE.SVM,
              },
              solde: internalTransfertLine.SOLDE,
              qte_vente: internalTransfertLine.QTE_VENTE,
              qte_bloq: internalTransfertLine.QTE_BLOQ,
              qte_trf: internalTransfertLine.QTE_TRF
            }
          }
        );
      }
    });
  }

}

internal-transfert-details.component.html

<div >
  <div  *ngIf="internalTransfertDetails">
    <div >
      <h1 >Transfert Interne - Details</h1>
      <div >
        <div  style="width: 20%;">
          <div >
            <table >
              <thead >
                <tr >
                  <th scope="col">Solde</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  *ngFor="let internalTransfertDetail of internalTransfertDetails"
                >
                  <td scope="row" >
                    {{internalTransfertDetail.solde }}
                  </td>
                  <td scope="row " >
                    <a
                      [routerLink]="[ '/transferts/internal-transfert-watch/'   internalTransfertDetail.titre.svm ] "
                    >
                      Link
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

internal-transfert-details.response.ts

import { ApiResponse } from "src/shared/types/api.response";

export interface InternalTransfertDetailsResponse extends ApiResponse {
    TRANS: {
        TITRE: {
            LABEL: string,
            ISIN: string,
            SVM: number,
        },
        SOLDE: number,
        QTE_VENTE: number,
        QTE_BLOQ: number,
        QTE_TRF: number,


    }[];
}

internal-transfert-details.ts

export interface InternalTransfertDetails {
    titre: {
        label: string;
        isin: string;
        svm: number;
    },

    solde: number;
    qte_vente: number;
    qte_bloq: number; 
    qte_trf: number; 

}

internal-transfert-watch.component.ts (child)

export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  internalTransfertDetails: InternalTransfertDetails[] = [];

  constructor(private service: InternalTransfertDetailsService, private router: Router) { }


  ngOnInit(): void {
    this.getTransfert()
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private getTransfert(): void {

    this.service.getTransfert().pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        
        this.internalTransfertDetails = res.TRANS.map(
          internalTransfertLine => {
            return {
              titre: {
                label: internalTransfertLine.TITRE.LABEL,
                isin: internalTransfertLine.TITRE.ISIN,
                svm: internalTransfertLine.TITRE.SVM,
              },
              solde: internalTransfertLine.SOLDE,
              qte_vente: internalTransfertLine.QTE_VENTE,
              qte_bloq: internalTransfertLine.QTE_BLOQ,
              qte_trf: internalTransfertLine.QTE_TRF
            }
          }
        );
      }
    });
  }

}

internal-transfert-watch.component.html

<div >
  <div >
    <div >
      <h1 >Transfert Interne - Details</h1>
      <div >
        <div  style="width: 30%;">
          <div >
            <table >
              <thead >
                <tr >
                  <th scope="col">Solde</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  *ngFor="let internalTransfertDetail of internalTransfertDetails"
                >
                  <td scope="row" >
                    {{internalTransfertDetail.solde }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks you a lot

CodePudding user response：

If you only want one line, don't use ngFor:

Change

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
  <td scope="row" >{{internalTransfertDetail[0].solde }}</td>
</tr>

<tr>
  <td scope="row" >{{internalTransfertDetails[0].solde }}</td>
</tr>

CodePudding user response：

Modify component.ts by adding filter like below.

this.internalTransfertDetails = res.TRANS.filter(internalTransfert => internalTransfert.SOLDE == 840).map(
      internalTransfertLine => {
        return {
          titre: {
            label: internalTransfertLine.TITRE.LABEL,
            isin: internalTransfertLine.TITRE.ISIN,
            svm: internalTransfertLine.TITRE.SVM,
          },
          solde: internalTransfertLine.SOLDE,
          qte_vente: internalTransfertLine.QTE_VENTE,
          qte_bloq: internalTransfertLine.QTE_BLOQ,
          qte_trf: internalTransfertLine.QTE_TRF
        }
      }
    );

And keep component.html like below.

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
    <td scope="row" >
        {{internalTransfertDetail.solde }}
    </td>
</tr>

Hope you got the answer.

CodePudding user response：

internalTransfertDetail is an object of an array. There's no reason to use the subscript operator here.

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
  <td scope="row" >{{internalTransfertDetail.solde }}</td>
</tr>

Let me know if this helps ^-^