【问题标题】:How to display current value to input field如何将当前值显示到输入字段
【发布时间】:2020-12-01 17:54:22
【问题描述】:

我有一张表,输入列表来自:

 list=[
{id:1,value:null},
{id:2, value:null},
]

我正在使用输入字段来更改列表中每个对象的值并将数据发送到一个数据库

<tbody>
      <tr *ngFor="let item of list">
        <td>{{item.id}}</td>
        <td>
           <input matInput type="number"name="fname" [(ngModel)]="item.value">
        </td> 
      </tr>
    </tbody>

之后,我从数据库中获取数据并希望显示数据库中的当前值。问题是我发送数据正常,获取数据正常,但当前数据未显示在输入字段中。当我使用 [(value)] 而不是 [(ngModel)] 时,数据库中的数据显示正常,但我无法再发送值。

【问题讨论】:

  • 嗨,我只能推测它为什么不适合你。你能花时间上传一个 stackblitz 示例吗?
  • 考虑到,当您从数据库中获取数据时,您需要更改“list”的值,在函数内部订阅
  • 是的,我这样做了,正如我所说,它适用于 [(value)] 而不是 [(ngModel)],但在这种情况下,我无法再发送数据,因为“list”没有从中获取值输入

标签: angular forms ngmodel


【解决方案1】:

value 是一个属性,您可以将值绑定到 [value]="name" 而 (valueChange)="..." 不起作用,因为该元素没有 @Output() valueChange;因此 [(value)]="..." 无效

【讨论】:

    【解决方案2】:

    请参阅:StackblitzDemo

    如果您的请求花费的时间太长,因此组件初始化后数据不会直接显示在您的视图中,因此您需要使用

    1 - ChangeDetectorRef

    2 - async pipe 供查看,这是最好的

    【讨论】:

    • 问题是我有一个初始表,有一个用户看到的起始数据,然后当数据插入数据库并返回时,我需要有与更新相同的初始表来自数据库的数据。例如,如果我使用 if (element.id == 1) 并为 id 为 1 的对象设置值,则表中的对象会更新,但其值不会显示在输入字段中。如果我从没有 if 条件的所有对象中分配一个值,则该值将显示在输入字段中。我不需要用基础数据重写初始表。
    • 问题是我为所有输入字段使用了相同的 id:)
    猜你喜欢
    • 2014-10-21
    • 1970-01-01
    • 2019-07-11
    • 2018-11-21
    • 2015-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多