I have an array and I just want to retrieve the value of the SOLDE variable.

The JSON file is available here.

The error message is the following:

error TS2339: Property 'SOLDE' does not exist on type 'AdvTitres'.
<td> {{details.SOLDE}}</td>

internal-transfert-watch.response.ts

export interface InternalTransfertWatchResponse extends ApiResponse {
    TRANS: AdvTitres;
}

export interface AdvTitres {

    TRANS: {
        TITRE: {
            LABEL: string,
            ISIN: string,
            SVM: number,
        },
        SOLDE: number,
        QTE_VENTE: number,
        QTE_BLOQ: number,
        QTE_TRF: number,

    }[];
}

internal-transfert-watch.service.ts

@Injectable()
export class InternalTransfertWatchService {
  private readonly api: string = environment.api;

  constructor(private http: HttpClient, private store: Store) {}

    getTransfert(svm: string): Observable<InternalTransfertWatchResponse> {
      return this.http.post<InternalTransfertWatchResponse>(this.api   `/NEKKYN`, {
        SVM: parseInt(svm)
     
      }, { headers: { AddCustomer: '' } });
    }
    
}

internal-transfert-watch.component.ts

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

  details?: AdvTitres;
  svm: string | null = null;

  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.getDetails();
  }

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

  private getDetails(): void {
    this.service.getTransfert(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
      

      }
    });
  }


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


}

internal-transfert-watch.component.html

<div  *ngIf="details">
    <table >
        <tbody>

            <tr>
                <th>Solde</th>
                <td> {{details.SOLDE}}</td>
            </tr>
        </tbody>
    </table>
</div>

I probably missed a step?

CodePudding user response：

You missed to notice that indeed, SOLDE is not part of your interface. It's part of the TRANS subobject, so you need to use

myObj.TRANS.SOLDE

CodePudding user response：

export interface InternalTransfertWatchResponse extends ApiResponse {
  TRANS: AdvTitres[];
}

export interface AdvTitres {

    TITRE: {
        LABEL: string,
        ISIN: string,
        SVM: number,
    },
    SOLDE: number,
    QTE_VENTE: number,
    QTE_BLOQ: number,
    QTE_TRF: number,

}