Angular2 表模型绑定文本输入

Posted 2023-02-23

【中文标题】Angular2 表模型绑定文本输入

【英文标题】：Angular2 table model binding with text input

【发布时间】：2017-06-16 11:49:49

【问题描述】：

我有一个 PrimeNG 表格，其中的单元格是可编辑的。当我编辑输入文本字段的值时，表模型不会改变。如何使表格模型绑定到输入文本？

这是我的代码：

<p-dataTable [value]="data" [editable]="true">
    <p-column>
        <template pTemplate type="body" let-row="rowData">
            <custom-input [(inputModel)]="row.value"></custom-input>
        </template>
    </p-column>
</p-dataTable>

自定义输入.html

<input #inputText pInputText type="text" [(ngModel)]="inputModel" />

自定义输入.ts

export class ValidationInputComponent implements OnInit 
    @Input() inputModel: Object;

    constructor() 
    

    ngOnInit() 
    

【问题讨论】：

有一个外部 custom-input.html 的原因吗？我不知道它是否有帮助，但您可以尝试直接编写 <input> 而不是引用另一个 html 文件。

是的，你是对的。没有外部自定义组件，一切正常。但我想要一个自定义组件，因为它有一些不同于普通输入字段的其他 css 功能。它经常在我的项目中使用。

表模型不变是什么意思？ :)

例如，我有一些值，比如 A、B、C（3 行）。我将第一个更改/编辑为 ABC (A->ABC)。然后当我点击保存时，它不会保存 (ABC, B, C) 而是 (A, B, C) - 旧值。

【参考方案1】：

您需要将值发送给您的父母，父母不会自动收到更改通知。为此，您需要使用Output。

所以在你的孩子身上，这样做：

<input pInputText type="text" [(ngModel)]="inputModel" (ngModelChange)="emitChange()" />

当输入发生变化时我们调用方法。然后该方法将更改发送给父级。

@Output() inputModelChange: EventEmitter<any> = new EventEmitter<any>();

emitChange() 
  this.inputModelChange.emit(this.inputModel)

对于双向绑定，我们使用与声明为输入相同的inputModel，但只需添加后缀Change，这意味着将匹配父项和子项中的值。

这是一个有效的plunker

【讨论】：

缅甸，这个答案或其他答案有帮助吗？如果是这样，请考虑接受一个:)

【参考方案2】：

不要将row.value 传递给您的inputModel，而是传递整个row：

<p-dataTable [value]="data" [editable]="true">
    <p-column>
        <template pTemplate type="body" let-row="rowData">
            <custom-input [(inputModel)]="row"></custom-input>
        </template>
    </p-column>
</p-dataTable>

然后，不要在自定义模板中将[(ngModel)] 设置为inputModel，而是将其设置为inputModel.value。

<input #inputText pInputText type="text" [(ngModel)]="inputModel.value" />

这是一个Example Stackblitz，说明输入使用自定义组件绑定到标题。

之所以可行，是因为row.value 可能是一个基元（例如字符串、数字或布尔值），您不能双向绑定一个基元，只能是对象。 （例如var row:any = value:"some value"）。 您的 custom-input 接收整个对象（row），并操纵其上的 value 属性。

编辑：

删除了 Example Plunkr，因为示例未加载。而是在 Stackblitz 中添加了新示例。

【讨论】：

示例不存在

好像 plunkr 没有加载。明天我将在 Stackblitz 中创建一个新的。感谢告知

@Waqas 我现在添加了一个工作示例。再次感谢您让我知道。