复位后未更新Angular 2输入值

Question

我有一个简单的输入，我想在添加英雄后将值重置为空字符串。问题是价值没有更新。为什么呢？

@Component({
  selector: 'my-app',
  template: `
      <input type="text" [value]="name" #heroname />
      <button (click)="addHero(heroname.value)">Add Hero!</button> 

      <ul>
        <li *ngFor="let hero of heroes">          
          {{ hero.name }}        
        </li>
      </ul>
  `,
})
export class App {
  name: string = '';
  heroes = [];

  addHero(name: string) {
   this.heroes.push({name});
   // After this code runs I expected the input to be empty
   this.name = '';
  } 

}

Answer 1

您有单向绑定，因此当您在输入中输入内容时，name属性未被更改。它仍然是""。点击Add hero!按钮后，您无法更改。

 addHero(name: string) {
   this.heroes.push({name}); // this.name at this line equals ''
   this.name = ''; // it doesn't do any effect
 } 

Angular2仅在更改value属性时才会更新。

使用由@angular/forms

提供的双向绑定

[(ngModel)]="name" 

确保在输入后更改name属性。

另一种方法是手动实施更改

[value]="name" (change)="name = $event.target.value"

Answer 2

按角度Template binding works with properties and events, not attributes.按角度[value]，因为您使用attributes将其绑定绑定到property而不是绑定到该输入的this.name = ""因为它在您设置select t.* ,row_number() over (partition by contractId order by saleDate) - 1 as SalesCountPerContract from mytable t 后仍保留在其中。