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

Question

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

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

登陆页面后，​​用户可以点击按钮打开modal，输入Partner的新数据。在点击"save" 之后，我成功地将Partner 对象发送到服务器并用一个ID 将其取回。之后，currentPartner 被初始化并且不为空。

我的问题是我无法使用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切换基于currentPartner的UI

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

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