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值的问题吗？

柱塞here

Answer 1

根据提供的插栓：

您将输入字段绑定为“ 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})`;
  }
}

Angular不对ngModel执行双向绑定

1 个答案: