javascript - 如何将 *ngif 用于 [值]？

Question

我有下面的 html 代码，用于在 ionic 3 中添加业务页面。我在其中使用 [(ngModel)]="businessData.name" 获取输入数据。为了编辑业务，我使用了同一页面，在该页面中，我用 [value]="savedbusinessData.name" 填写了所有输入，无论是通过 mybusiness api 获得的数据，如公司名称或电子邮件等。但现在编辑业务工作正常，但是当新用户去添加业务页面时，我得到 错误类型错误:无法读取未定义的属性“名称” 因为 [value]= “savedbusinessData.name”。为了解决这个问题，我尝试使用此输入的 *ngIf="!savedbusinessData == ''" 消失了。那么我如何在这里使用 ngif 或任何其他解决方案呢？

<ion-content padding>
    <div class="addbusiness">

        <ion-item>
            <p (click)="addCata()">Select Category</p>
                <!-- <p class="adedcat">{{htmlContent}}</p> -->
                <ion-tags-input  [separatorStr]="','" [once]="'true'" [canBackspaceRemove]="false" [canEnterAdd]="false" [(ngModel)]="catatags" (onChange)="onChange($event)"></ion-tags-input>
            <!-- <p (click)="clearcat()">Clear All</p> -->
        </ion-item>

       <ion-item> 
        <ion-input *ngIf="!savedbusinessData == ''" [value]="savedbusinessData.name" [(ngModel)]="businessData.name" type="text" placeholder="Name"></ion-input>
       </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.contact" [(ngModel)]="businessData.contact" type="number" placeholder="Contact Number"></ion-input>
       </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.address" [(ngModel)]="businessData.address" type="text" placeholder="Adress"></ion-input>
      </ion-item>
       <ion-item> 
        <ion-input  [value]="savedbusinessData.website" [(ngModel)]="businessData.website" type="text" placeholder="Website"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="savedbusinessData.email" [(ngModel)]="businessData.email" type="email" placeholder="Email"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="savedbusinessData.about" [(ngModel)]="businessData.about" type="text" placeholder="About"></ion-input>
      </ion-item>
        <ion-item> 
        <ion-input  [value]="tags" [(ngModel)]="businessData.tags" type="text" placeholder="Tags"></ion-input>
      </ion-item>         
        <button class="busiadd" (click)="addBusiness()" ion-button>Submit</button>

  </div>
</ion-content>

Answer 1

我强烈推荐使用 Angulars 响应式表单。在相关模块中导入 ReactiveFormsModule。删除所有 [(ngModel)] 并将所有 input 放入这样的表单标签中

<form [formGroup]="myForm" (ngSubmit)="save(myForm.value)"></form>

然后删除 [value] 属性。添加 formControlName="name"/"contact"等到 input 标签。在您的 TS 中按如下方式创建它

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    name: '',
    contact: '',
    // ...etc
  });
}

当您的数据到达时，您可以简单地用以下代码修补表单

this.myForm.patchValue(data);

它只修补匹配的属性。其他人将被忽略。另外不要忘记创建一个保存函数，您可以从中处理表单数据。

function save(formData: YourDataType) {
  // handle formData here
}