Angular 角度模型重新评估getter@Input

我们正在进行一个angular项目，其中有一个组件通过getter生成一个加载列表，该列表生成使用ngModel指令的输入。每次我们更改输入中的值时，项目列表都会因某种原因重新评估，并重新命名我们不想要的组件

下面是一个显示这种行为的示例

import {NgModule,ChangeDetectionStrategy,Component,OnChanges,SimpleChanges,Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <test-component [items]="getterList"></test-component>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnChanges{
  staticList = ["a","b","c"];

  get getterList():string[]{
    console.log('getterList');
    return this.staticList.map(a=>a);
  }

  ngOnChanges(changes:SimpleChanges){
    console.log(changes);
  }
}


@Component({
  selector: 'test-component',
  template: `
    <div *ngFor="let item of items">
        {{item}}
        <input type="text" [(ngModel)]="testValue" placeholder="ngModel" />
        <input type="text" [value]="testValue" placeholder="no ngModel" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent {
  @Input() items:string[] = [];
  testValue:string="";
}


@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ App,TestComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

import{NgModule，changedtectionstrategy，Component，OnChanges，SimpleChanges，Input}来自'@angular/core'
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类应用程序实现OnChanges{
staticList=[“a”、“b”、“c”]；
get getterList（）：字符串[]{
log（'getterList'）；
返回这个.staticList.map（a=>a）；
}
ngOnChanges（更改：SimpleChanges）{
控制台日志（更改）；
}
}
@组成部分({
选择器：“测试组件”，
模板：`
{{item}}
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类TestComponent{
@输入（）项：字符串[]=[]；
testValue:string=“”；
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[应用程序，测试组件]，
引导：[应用程序]
})
导出类AppModule{}

（这是普朗克）

在本例中，我们有一个通过getter生成的列表。列表的每个元素生成2个输入；一个带有ngModel，另一个没有ngModel，我们可以看到第二个输入不会触发getter

---

为什么ngModel指令重新触发getter

好吧，那次突袭很有帮助<代码>[（ngModel）]语法用于双向绑定。在模板中，使用

[（ngModel）]=“testValue”

，这对于循环的每次迭代都是相同的（迭代的元素是

item

（根据

*ngFor

）的项）。因此基本上所有的“第一次输入”在循环中，每个迭代都与一个模型属性

testValue

相关联。由于双向绑定，它会自动更新其余的“第一个输入”字段。第二个是

[value]=“testValue”

，它只使用单向绑定的

[]

。因此它不会更新其余字段

---

如果将

（）

从

[（ngModel）]

中移除，使其变成单向绑定，

[ngModel]

，您可以看到区别。它的行为与第二个输入字段非常相似。因此，本质上它与获取无关，所有的魔法都发生在双向

[（ngModel）]上

binding。希望它有帮助。

嗯，plunker很有帮助。

[（ngModel）]

语法用于双向绑定。在模板中，您使用的

[（ngModel）]=“testValue”

对于循环的每次迭代都是相同的（迭代元素是

项

（根据

*ngFor

），因此基本上所有的“第一次输入”在循环中，每个迭代都与一个模型属性

testValue

相关联。由于双向绑定，它会自动更新其余的“第一个输入”字段。第二个是

[value]=“testValue”

，它只使用单向绑定的

[]

。因此它不会更新其余字段

---

如果将

（）

从

[（ngModel）]

中移除，使其变成单向绑定，

[ngModel]

，您可以看到区别。它的行为与第二个输入字段非常相似。因此，本质上它与获取无关，所有的魔法都发生在双向

[（ngModel）]上

绑定。希望它能有所帮助

问题不在于字段以及如何将其应用于其他字段。问题在于当ngModel更改时，列表的getter会重新触发。正如我所说，这是由于双向绑定语法。如果您只是简单地使用，

[ngModel]

而不是

[（ngModel）]

，它被触发了吗？我们需要双重绑定，只是不希望通过父级（AppComponent）无故重新生成列表更改字段时使用getter。问题不在于字段以及如何将其应用于其他字段。问题在于当ngModel更改时，列表的getter会重新触发。正如我所说，这是由于双向绑定语法。如果您只是简单地使用，

[ngModel]

，而不是

[（ngModel）]

，它被触发了吗？我们需要双重绑定，只是不希望通过父级（AppComponent）无故重新生成列表当我们改变字段时，getter。getter的用例是什么，你需要它吗？是的，我们从一个实体映射到另一个实体，我们知道我们可以在ngOnInit中这样做一次，但是我们试图理解为什么ngModel会无缘无故地触发getter。getter的用例是什么，你需要它吗？是的啊，我们从一个实体映射到另一个实体，我们知道我们可以在ngOnInit中这样做一次，但我们正在试图理解ngModel为什么会无缘无故地触发getter