Angular 应用中无法更新输入表单字段？

Question

我正在创建简单的网页，该网页具有创建新对象 Partner 并将其发送到服务器的模式。以及几个用于显示新创建数据的输入字段。我正在使用 Angualr10 和 mdbootstrap 作为组件。

我有一个 button 和一个只有 input 字段的 form，它们被禁用，它们仅用于表示已创建的 Partner.

登陆页面后，用户可以点击按钮打开模式输入关于Partner的新数据。在点击 "save" 后，我成功地将 Partner 对象发送到服务器并用 id 取回它。之后，currentPartner 被初始化而不是 null。

我的问题是我无法使用 currentPartner 对象更新输入字段。我怎么知道 currentPartner 不为空？好吧，如果我单击任何输入字段（在将数据发送到服务器之后），该字段将更新为我之前在模式中输入的数据。

代码如下：

    currentPartner : Partner; //declare partner

      savePartnerAndCloseModal(modal : any){
           modal.hide()
           var partner = <Partner>{}
           partner.name = this.name.value;
           partner.phone = this.phone.value;
           partner.taxNumber = this.taxNo.value;
           partner.email =  this.phone.value;
           partner.address = this.address.value;
    
           this.partnerService.addPartner(partner).subscribe(data =>{
             this.currentPartner = data //Partner from server with id
             this.partners.push(data) //some list with other Partners
           });

  }

      <form class="text-center border border-light p-5" >
      
        <p class="h4 mb-4">Business Partner</p>
      
        <!-- Name -->
        <div [ngModel]="currentPartner" *ngIf="currentPartner; else elseBlock">
          <input type="text"    mdbInput disabled
          class="form-control mb-4" [value]="currentPartner.name"  >
        </div>
        <ng-template #elseBlock>
          <input type="text" disabled   mdbInput
          class="form-control mb-4" placeholder="Name" >
        </ng-template>
        
                 
        <!-- Address -->
        <input type="text" disabled mdbInput
          class="form-control mb-4" placeholder="Address">
       
        //other properties (inputs) for partner
      </form>

还有什么问题？我不知道“Angular”的说法：“如果 currentPartner 为空显示占位符值，否则显示 currentPartner 的值”？

Answer 1

你超级接近，你可以使用ng-template和ng-container切换UI基于currentPartner

<ng-container *ngIf="currentPartner; else placeholderPartner">
  <!-- shows when currentPartner is defined -->
</ng-container>

<ng-template #placeholderPartner>
  <!-- shows when currentPartner is null/undefined -->
</ng-template>

Angular 应用中无法更新输入表单字段？

Input form fields are cannot be updated in Angular app?

twitter-bootstrap

typescript

angular

mdbootstrap