相关疑难解决方法(0)

我在应用程序的逻辑中有复杂的,可能是新手的bug,所以我会尝试提供全面的信息.

我有一个绑定到我的数据模型的注册表单.用户可以在注册期间添加电话号码字段并保存为阵列.

我的模特:

export class RegistrationFormModel {
  //
  //
    Phones: Array<{Phone: string;}>;
  //
  //
}

并表示这部分形式

     <ion-item *ngFor="let Phone of regModel.Phones; let i = index">

        <ion-label floating>Phone number*</ion-label>
        <ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" name="Phone" #Phone="ngModel"
                   pattern="\d{10}"></ion-input>
        <ion-icon *ngIf="i==0" name="ios-add-circle-outline" item-right no-padding
                  (click)="addPhone()"></ion-icon>
        <ion-icon *ngIf="i!=0" name="ios-remove-circle-outline" item-right no-padding
                  (click)="removePhone(i)"></ion-icon>

     </ion-item>

我添加和删除手机的方法.我为调试目的添加了日志和增量索引:

debugIndex = 0;
 \\
 \\
  addPhone() {
    console.log('phones before add: ' + JSON.stringify(this.regModel.Phones));
    this.regModel.Phones.splice((this.regModel.Phones.length), 0, {Phone: '' + this.debugIndex++});
    console.log('phones after add: ' + JSON.stringify(this.regModel.Phones));
  }

  removePhone(i: number) {
    console.log('phones before …

我想在删除项目*ngFor的*ngFor.

当我删除回复'test2'时,

在我添加了另一个回复之后,'test3'变空了.

<hello name="{{ name }}"></hello>

<form #form="ngForm" (ngSubmit)="submit()" ngNativeValidate class="mt-4">

  <div *ngFor="let content of contents; let indexContent = index; let firstContent = first;">

    <div *ngFor="let message of content.messages; let indexMessage = index; let firstMessage = first;">
      <table>
        <thead>
        <tr>
          <th>Id</th>
          <th>Text</th>
          <th class="text-right">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let reply of message.replies; let indexReply = index; let firstReply = first;">
          <td [innerHtml]='reply.id'></td>
          <td>
            <input type="text"
            id="{{indexContent}}-{{indexMessage}}-{{indexReply}}-reply-text"
            [(ngModel)]=content.messages[indexMessage].replies[indexReply].text
            name="[[indexContent]]-[{{indexMessage}}]-[{{indexReply}}]-reply-text">
            <br>
            <span [innerHtml]="contents[indexContent].messages[0].replies[indexReply].text"></span>
          </td>
          <td>
            <span (click)="message.removeReply(reply)">Remove …