Question

我在下面的html代码中添加了离子3中的业务页面。在这里，我使用[(ngModel)]="businessData.name"获取输入数据。在编辑业务时，我使用了同一页面，其中以[value]="savedbusinessData.name"填充所有输入，无论数据是通过mybusiness api获得的，例如公司名称或电子邮件等。但是现在编辑业务可以正常工作，但是当新用户加入时添加业务页面，由于ERROR TypeError: Cannot read property 'name' of undefined，我得到了[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);

它仅修补匹配的属性。其他人将被忽略。另外，不要忘记在可以处理表单数据的位置创建一个 save 函数。

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>

如何将* ngif用于[值]？

2 个答案: