如何将* ngif用于[值]？

Question

我下面有用于在ionic 3中添加业务页面的html代码。在哪里使用[(ngModel)]="businessData.name"获取输入数据。 为了编辑业务，我使用了相同的页面，在该页面上，我所有的输入都使用[value]="savedbusinessData.name"填充，无论数据是通过mybusiness api获得的，例如公司名称或电子邮件等。但是现在编辑业务可以正常使用，但是当新用户使用时去添加业务页面我收到ERROR TypeError: Cannot read property 'name' of undefined由于[value]="savedbusinessData.name" ERROR TypeError: Cannot read property 'name' of undefined 。 为了解决这个问题，我尝试使用此输入的*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”等添加到输入标签。 在您的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
}

Answer 2

采用 ？。 空检查。

[value]="savedBusinessData?.name"

如果要隐藏输入，请使用。

<ion-item *ngIf="savedBusinessData !== undefined">
  <ion-input [value]="savedBusinessData?.name"></ion-input>
</ion-item>