Question

如何更新通过*ngFor打印的元素数组？我已经用双向绑定设置了输入，但是它似乎并没有改变原始数组。还尝试设置trackBy，但没有帮助。

父组件模板

<ul>
  <app-skill-item
    *ngFor="let skill of skills; trackBy: trackByFn"
    [skill]="skill" (edited)="updateSkills()"></app-skill-item>
</ul>

描述为skills: Observable<string[]>;并从FireBase获取的组件技能。我需要更新该数组并将其推回以更新文档。

儿童筷子

<li class="lead" *ngIf="!isEditing" (click)="editStart()">
  {{ skill }}
</li>
<li class="lead" *ngIf="isEditing" (click)="editStart()">
  <input [(ngModel)]="skill" type="text" (blur)="editEnd()">
</li>

我如何获得价值

constructor() {
this.skillService.getSkills(this.db).subscribe(names => this.skills = names.name);
}

服务

getSkills(db) {
    return db.collection('about').doc('skills').valueChanges();
}

Answer 1

但是，如果您正在使用可观察对象，则将无法对其进行编辑。因此，您可以/应该做的是订阅它，获取第一个值，然后复制它。

在您的班级/组件中

constructor() {
     this.skillService.getSkills(this.db).pipe(first()).subscribe(names => this.skills = names.name);
}

我之所以建议仅采用第一个值（通过传递第一个运算符）的原因是，因为我们不一定可以更改可观察值，我们不希望可观察值发出新值并覆盖新值赋予值不同的值。第一个管道将自动取消订阅可观察对象，并防止这种情况发生。希望这会有所帮助。

Answer 2

您永远不会修改数组中的任何内容。您的代码所做的基本上等同于

// input binding with [skill]="skill"
childComponent.skill = parentComponent.skills[index];

// ngModel binding
childComponent.skill = "some new entered value";

那并不会改变数组中的任何内容。

您需要更改设计以实际更改数组中的值，即具有某些功能

parentComponent.skills[index] = "some new entered value";

通过* ngFor

2 个答案: