Angular 没有为 ngModel 执行双向绑定

Question

我有一个字符串对象数组，格式为（旧，新）值 例如：

this.values= {
  "countByView": {
    "count1": "2(4)",
    "count2": "5(7)",
    "count3": "7(10)"
  }
}

因为它们是字符串，所以我在显示时使用下面的方法将它们转换为 HTML..

Old value of count 1 : {{values.countByView.count1.toString().split('(')[0]}}     //output :2
New value of count 1 : {{values.countByView.count1.toString().split('(')[1].slice(0,-1)}})}}  //output:4

效果很好。

我试图在文本框的帮助下进行两种方式绑定 即，

它绑定了 count1 的值，但在更改时它不会被反射回来。

这是 ngModel 值的问题吗？

Plunkerhere

Answer 1

根据提供的plunker：

你用“count1.toString().split('(')[0]”绑定输入字段

• 当您拆分字符串值时，它会返回一个新引用，这意味着绑定是在新引用上完成的，而不是 count1 引用。

为了修复它，你可以定义两个变量：

preCounter = 2;
postCounter = 4;

然后您可以将 ngModel 绑定到 preCounter 变量。

<input [(ngModel)]="preCounter">

============================= 编辑================== =============

新的解决方案：

我已经更改了您在 plunker 中提供的代码，我做了一个将计数绑定到输入字段的技巧，如下所示：

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

@Component({
  selector: 'sample-app',
  template: `
    <!-- class gets set here fine - problem with svg? -->
    <h1> Counter: {{count1}} </h1>
    <h1>Old value of count1 : {{count1.toString().split('(')[0]}}</h1>
     <h1>New value of count1 : {{count1.toString().split('(')[1].slice(0,-1)}} </h1>

     //If I change anything inside text box,it's not reflecting in Old value of count1

     <input type="text" [(ngModel)]="preCounter" name="count1" 
        (keyup)="onCountChange()"
     >

  `
})
export class AppComponent {
  color: string = 'red';

  preCounter = 2;
  postCounter = 4;

  count1="2(4)";

  // track the change in the input field
  onCountChange() {
    this.count1 = this.preCounter + `(${this.postCounter})`;
  }
}