Message "Object Object" in Angular

In fact, I will want to display the value of the solde into the input of the form.

img 1

I got an [Object Object] error, I don’t understand the problem?

I think the problem is here? I don’t know how to retrieve the SOLDE variable ?

private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
        this.qtte = res.TRANS;  // solde ?????
        console.log("Bonjour")
        console.log(this.qtte)
      }
    });
  }

internal-transfert-watch.response.ts

export interface InternalTransfertWatchResponse extends ApiResponse {
    TRANS: AdvTitres[];
  }
 
  export interface AdvTitres {
 
      TITRE: {
          LABEL: string,
          STOCK: string,
          ISIN: string,
          SVM: number,
      },
      SOLDE: number,
      COUPON: number,
      QTE_VENTE: number,
      QTE_BLOQ: number,
      QTE_TRF: number,
 
  }

Here is the code TS and HTML

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

  details?: AdvTitres[] = [];
 
 
  svm: string | null = null;
  qte: number;
  type: string = '';
  dest: string = '';
  qtte: AdvTitres[];


  constructor(   
    private service: InternalTransfertWatchService,
    private activatedRoute: ActivatedRoute,
    private location: Location,
  ) { }

  ngOnInit(): void {
    this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
  
    if (!this.svm) {
      this.goBack();
      return;
    }
    this.getSolde();
  }

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


  private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
        this.qtte = res.TRANS;  // solde
        console.log("Hello")
        console.log(this.qtte)
      }
    });
  }

  /* Form */ 
  submit(): void {
    this.service.getInternalTransfertStock(parseInt(this.svm!), this.qte, this.type, this.dest).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.goBack();
      }
    });
  }


  goBack(): void {
    this.location.back();
  }


}

&&

<div class="container" *ngIf="details">
  <table class="table table-hover table-striped spaceLeft">
    <tbody>
      <tr>
        <th>SVM</th>
        <td>{{details[0].TITRE.SVM}}</td>
        <th>Solde</th>
        <td>{{details[0].SOLDE}}</td>
        <!-- <td>{{details|json}}</td> -->
      </tr>
    </tbody>
  </table>

  <div class="card" style="width: 100%;">
    <div class="card-body">
      <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && submit()">
        <div class="row row-cols-3 pt-3">
          <div class="col text-end">
            <label for="qte" class="form-label">Quantity</label>
          </div>
          <div class="col-4">
            <input
              id="qte"
              name="qte"
              type="text"
              class="form-control"
              style="min-width: 380px"
              maxlength="25"
              [(ngModel)]="qtte"
            />
          </div>
        </div>

        <div class="row row-cols-3 pt-3">
          <div class="col text-end">
            <label for="type" class="form-label">Beneficiary change</label>
          </div>
          <div class="col-4">
            <select [(ngModel)]="type" name="type" class="form-select">
              <option value="O">O</option>
              <option value="">N</option>
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Here is also the file JSON.

If you have an idea, I am interested.

Thank you a lot.

edit

private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
        console.log("Test 1")
        this.qtte = res[0]["SOLDE"];
      }
    });
  }

>Solution :

It seems like you are mixing something up here. Keep in mind that TRANS is an array and does not have ONE exact value for SOLDE but rather a few.

If you could provide a bit more detail what exactly you want to do with the SOLDE values, whether you want to show them in a list or if you want to show all of the array items in TRANS, we can try to figure out a solution.