Angular 包含与 ngFor 相关内容的 HTML 输入

发布于08月08日

这是我的模板代码摘录:

<ul class="panel-list bullet-list">
  <li *ngFor="let paragraph of selectedExperience.description">
    <div *ngIf="!editMode">
      {{ paragraph }}
    </div>
    <input
      *ngIf="editMode"
      {{paragraph}}
      id="paragraph"
      type="text"
      name="paragraph"
      placeholder="Párrafo"
    />
    <button
      (click)="deleteParagraph(selectedExperience, paragraph)"
      *ngIf="editMode"
      class="btn-edit"
    >
      <svg>
        ...
      </svg>
    </button>
  </li>
</ul>

我的意图是在启用编辑模式时将每个段落显示为输入，但我不知道如何做到这一点.我知道输入一定有问题.此外，我没有使用[(NgModel)]，因为它不允许我使用，除非我执行以下操作:

[(ngModel)]="selectedExperience.description![0]"

当编辑模式=FALSE时，结果如下所示 enter image description here个

这是(the problem)编辑模式=TRUE时的外观 enter image description here个

推荐答案

最新情况:

从here中派生出来的人，一定要给这个答案加分！不要更新变量，但使用索引更新数组属性！

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<input type="text" [value]="name" />
<li *ngFor="let paragraph of test; let i = index; trackBy: trackBy">
  <input type="text" [(ngModel)]="test[i]" />
</li>
{{ test | json }}

角码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  test = ['123', '456'];
  trackBy(index, item) {
    return index;
  }
}

stackblitz个

这个怎么样？使用ngModel号装订并将段落设置为该装订.

<ul class="panel-list bullet-list">
  <li *ngFor="let paragraph of selectedExperience.description">
    <div *ngIf="!editMode">
      {{ paragraph }}
    </div>
    <input
      *ngIf="editMode"
      id="paragraph"
      [(ngModel)]="paragraph"
      type="text"
      name="paragraph"
      placeholder="Párrafo"
    />
    <button
      (click)="deleteParagraph(selectedExperience, paragraph)"
      *ngIf="editMode"
      class="btn-edit"
    >
      <svg>
        ...
      </svg>
    </button>
  </li>
</ul>