Angular 2-值在输入文本框中未更新，但是如果在花括号内使用则更新

Question

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

@Component({

  selector: 'my-app',
  template: `<input [(ngModel)]="name"  type="text" (input)="inputChange()">
<h3>{{name}}</h3> `
})
export class AppComponent  { 
  name = 'Apple'; 

   inputChange() {
     this.name="Zebra";

  }
}

这是我的角度分量。 我有一个输入框，在每个按键输入上调用函数“ inputChange（）”，它将我的名字更改为“ Zebra”，

我必须验证用户输入并返回某些值，每次他们写东西时都必须为其调用输入事件。我希望文本框值与“ Zebra”相同，因为无论用户在文本框中键入什么内容，函数都会更改该值。我在这里做什么错了？

Answer 1

您正在呼叫class table { public $mysqli; public $display; public function mysqli() { $mysqli = new mysqli('hostname', 'username', 'password', 'database'); return $mysqli; } public function __construct() { $this->mysqli = $this->mysqli(); } public function display() { $sql = "SELECT * FROM table"; $this->display = $this->mysqli->query($sql); } } $table = new table(); $table->display(); while($row = $table->display->fetch_assoc()) { echo $row['name']. " " . $row['country']; }; ，它将属性名称更改为“ Zebra”。您已经实现了双向绑定。因此，没有必要调用事件函数。

更改此：

import numpy as np
import matplotlib.pyplot as plt
from lmfit import Model


def f(x, a1=0.00010, a2=0.00013, a3=0.00013, teta1=1, teta2=0.00555, teta3=0.00555, phi1=-50, phi2=600, phi3=-900,
      a=0.000000019, b=0):

    formule = a1 * np.tanh(teta1 * (x + phi1)) + a2 * np.tanh(teta2 * (x + phi2)) + a3 * np.tanh(
        teta3 * (x + phi3)) + a * x + b

    return formule

# generate points used to plot
x_plot = np.linspace(-10000, 10000, 1000)

gmodel = Model(f)

result = gmodel.fit(f(x_plot), x=x_plot, a1=1,a2=1,a3=1,teta1=1,teta2=1,teta3=1,phi1=0,phi2=0,phi3=0)

plt.plot(x_plot, f(x_plot), 'bo')
plt.plot(x_plot, result.best_fit, 'r-')
plt.show()

到

inputChange()

要验证该值，您可以使用多个选项。 其中1个正在获取HTML元素的对象引用。

这可以通过以下方式完成：

<input [(ngModel)]="name"  type="text" (input)="inputChange()">

在组件文件中：

<input [(ngModel)]="name"  type="text">

并删除课程<input [(ngModel)]="name" type="text" (input)="inputChange(myInput)" #myInput> 的双向绑定

Answer 2

将输入事件更改为键盘输入

<input [(ngModel)]="name"  type="text" (keyup)="inputChange()">

Answer 3

在这种情况下，您必须删除[（ngModel）]绑定并直接使用输入元素。

您需要将Renderer2注入到组件中，然后使用来更新视图值

this.renderer.setProperty(element, 'value', 'Zebra');

其中元素是输入元素的引用，例如@ViewChild

您任务的最佳实践是创建自定义组件或指令，该组件或指令实现ControlValueAccessor并在内部使用Renderer2。

https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel