如何在没有 ngFor 的情况下使用 Angular 5 更新数据答案

【问题标题】：How to update data without ngFor using angular 5如何在没有 ngFor 的情况下使用 Angular 5 更新数据
【发布时间】：2018-10-10 11:33:00
【问题描述】：

我在 Firestore 中有一个收藏。当我按下“更新”按钮时，我想更改集合 proyecto.descripcion。但如果没有 *ngFor" i> 方法

Сode 在这里https://stackblitz.com/edit/angular-tcgq2f

【问题讨论】：

使用响应式表单或模板驱动表单angular.io/guide/forms

标签： angular firebase angular5 google-cloud-firestore

【解决方案1】：

我只需向输入字段添加一个模板引用变量，向按钮添加一个点击事件，然后在点击时调用一个更新方法。

所以是这样的：

HTML

<div class="container">
   <form>  
      <div>           
        <input
           #newDescription
           type="text" name="Description"
           placeholder="Here new description"
        >
       </div>  
       <div>
          <input 
            type="submit"
            (click)="updateDescription(newDescription.value)"
            value="Update">
       </div>
   </form>
</div>

类

updateDescription(description: string) {
   this.service.updateDescription(param.id, description);
}

服务

updateDescription(id: string, description: string){
    // http update here
}

【讨论】：

【解决方案2】：

您需要在输入字段中添加[ngModel]，然后单击以将该值填充到我相信的列表中的proyecto.description 值。将起始值设置为 ngModel 值

【讨论】：

是的，但我不能从proyectoSeleccionado返回proyecto.description（在我的情况下）