如何在输入中显示值并锁定输入？

问：

在 HTML 表中，我检索字段的值。SOLDE

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

这是一张图片

图像1

除此之外，我必须检索输入中的 solde 值并锁定输入。

我试图创建一个表单并添加变量来检索值，但不幸的是它不起作用。SOLDE

<div class="card-body">
  <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid ">
    <div class="row row-cols-3 pt-3">
      <div class="col text-end">
        <label for="solde" class="form-label">Solde</label>
      </div>
      <div class="col-4">
        <input
          id="solde"
          name="solde"
          type="text"
          class="form-control"
          style="min-width: 380px"
          maxlength="25"
          [(ngModel)]="details[0].SOLDE"
        />
      </div>
    </div>
  </form>
</div>

我收到一条错误消息：

Error TS2532: Object is possibly 'undefined'.

我认为问题就在这里——>？[(ngModel)]="details[0].SOLDE

请问如何从输入中检索值？

目前，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();
  }

}

感谢您的帮助。