Cannot assign value "undefined" to template variable "buttonName". Template variables are read-only. Angular/TypeScript

huangapple
go评论98阅读模式
英文:

Cannot assign value "undefined" to template variable "buttonName". Template variables are read-only. Angular/TypeScript

问题

所以我想说我是Angular的新手。

app.component.ts;

  1. model = new Model();
  2. addItem(value: string) {
  3.     if (value !== "") {
  4.         this.model.items.push(new TodoItems(value, false));
  5.     }
  6. }

model.ts;

  1. export class TodoItems {
  2.     description;
  3.     action;
  5.     constructor(description: string, action: boolean) {
  6.         this.description = description;
  7.         this.action = action;
  8.     }
  9. }

app.component.html;

  1. <input type="text" #buttonName class="form-control">
  2. <div class="input-group-append">
  3.     <button class="btn btn-primary" (click)="addItem(buttonName.value); buttonName=''">Add</button>
  4. </div>

我如何解决这个错误？

英文:

So I want to say Im new for Angular.

app.component.ts;

  1.  model = new Model();
  2.  addItem(value:string){
  3.     if(value!=&quot;&quot;)
  4.     {this.model.items.push(new TodoItems(value,false));}

model.ts;

  1. export class TodoItems{
  2.         description;
  3.         action;
  5.     constructor(description: string,action: boolean){
  6.         this.description= description;
  7.         this.action = action;
  8.     }  
  9.  }

app.component.html;

  1. &lt;input type=&quot;text&quot; #buttonName class=&quot;form-control&quot;&gt;
  2.           &lt;div class=&quot;input-group-append&quot;&gt;
  3.             &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;addItem(buttonName.value); buttonName=&#39;&#39;;&quot;&gt;Add&lt;/button&gt;
  4.           &lt;/div&gt;

How I can solve this error?

答案1

得分: 1

你应该在组件中处理 todoText 状态的更改（尽管我看不到它的任何用途），而不是在模板中。所以我猜你想要清除内容，这样你可以在执行的函数中处理它。
我稍微重写了组件。

如果你继续收到错误，请分享 app.component，因为它不太清楚是否定义正确。

app.component.ts

  1. export class AppComponent {
  2.   todoText = '';
  3.   model = new Model();
  5.   public addItem(value: string) {
  6.     if (value != '') {
  7.       this.todoText = ''; // 在这里管理 todoText
  8.       this.model.items.push(new TodoItems(value, false));
  9.     }
  10.   }
  11. }

app.component.html

  1. <input type="text" #buttonName class="form-control" />
  2. <div class="input-group-append">
  3.   <button
  4.     class="btn btn-primary"
  5.     (click)="addItem(buttonName.value);"
  6.   >
  7.     Add
  8.   </button>
  9. </div>
英文:

You should handle the shange of status of todoText in the component (Even though I don't see any use of it), not the template. So I'm guessing you want to clear the content, so you can handle it in the function you execute.
I rewrote the component a bit.

If you keep getting the error, please share app.component, since it isn't that clear if it is well defined.

app.component.ts

  1. export class AppComponent {
  2.   todoText = &#39;&#39;;
  3.   model = new Model();
  5.   public addItem(value: string) {
  6.     if (value != &#39;&#39;) {
  7.       this.todoText = &#39;&#39;; //Manages the todoText here
  8.       this.model.items.push(new TodoItems(value,false));
  9.     }
  10.   }
  11. }

app.component.html

  1. &lt;input type=&quot;text&quot; #buttonName class=&quot;form-control&quot; /&gt;
  2. &lt;div class=&quot;input-group-append&quot;&gt;
  3.   &lt;button
  4.     class=&quot;btn btn-primary&quot;
  5.     (click)=&quot;addItem(buttonName.value);&quot;
  6.   &gt;
  7.     Add
  8.   &lt;/button&gt;
  9. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年6月1日 07:47:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76377903.html
  • angular
  • angularjs-ng-click
  • model
  • model-binding
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定