无法将 [(ngModel)] 绑定到 Angular html

Posted 2023-03-11

【中文标题】无法将 [(ngModel)] 绑定到 Angular html

【英文标题】：Cannot bind [(ngModel)] into angular html

【发布时间】：2020-09-07 20:11:03

【问题描述】：

我正在尝试使用 angular 实现编辑表单，但我遇到了与 [(ngModel)] 绑定值的错误

错误类型错误：无法读取未定义的属性“名称”

这是我的打字稿代码：

import  Component, OnInit  from "@angular/core";
import  HttpService  from "./../http.service";
import  ActivatedRoute, Router  from "@angular/router";

@Component(
  selector: "app-edit",
  templateUrl: "./edit.component.html",
  styleUrls: ["./edit.component.scss"],
)
export class EditComponent implements OnInit 
  id: string;
  private sub: any;
  author: any;
  error: any;

  constructor(
    private _httpService: HttpService,
    private _route: ActivatedRoute,
    private _router: Router
  ) 

  ngOnInit() 
    this.sub = this._route.params.subscribe((params) => 
      this.id = params["id"];
    );

    this.oneAuthorInfoRetrieve();
  

  oneAuthorInfoRetrieve() 
    let observable = this._httpService.getOneTask(this.id);
    observable.subscribe((data) => 
      console.log("Successfully got data from get one author", data);
      this.author = data["data"];
    );
  

  onEdit() 
    let observable = this._httpService.editTask(this.id, this.author);
    observable.subscribe((data) => 
      console.log("Successfully update", data);
    );
  

这是我的 HTML 代码：

<a [routerLink]="['/home']"> Home </a>

<b>
  <p>Edit this Author:</p>
</b>

<form class="border">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" class="form-control" name="name" [(ngModel)]="author.name">
  </div>
  <div class="form-group">
    <button class="btn btn-danger" id="cancel">Cancel</button>
    <button class="btn btn-primary" id="submit" (click)="onEdit()">Submit</button>
  </div>
</form>

我可以做些什么来修复这个错误？

【参考方案1】：

您遇到此错误是因为 author 未定义。您可以为作者添加一个值 throw a constructor 或简单地在声明 author: any = ;

或者，您可以只显示定义作者的form：

<form class="border" *ngIf="!!author">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" class="form-control" name="name" [(ngModel)]="author.name">
  </div>
  <div class="form-group">
    <button class="btn btn-danger" id="cancel">Cancel</button>
    <button class="btn btn-primary" id="submit" (click)="onEdit()">Submit</button>
  </div>
</form>

【讨论】：

console.log("Successfully got data from get one author", data); 是否在 data['data'] 中显示某些内容？

【参考方案2】：

你必须初始化对象作者。因为起初 author.name 不存在。 解决方案：

// declare author such as
author = ;// not null

【讨论】：

实际上你应该将作者声明为已知对象。例如，您应该创建名为 Author 的类或接口。然后你初始化它：export class Author nameL string; ... 在你的 ts 文件中声明如下：author: Author = new Author();

【参考方案3】：

Demo创建您的作者模型而不是使用任何模型

export class Author
 public name:string="";
 constructor()

然后在组件中

author: Author;

在 ngOnInit 或构造函数中初始化它

this.author=new Author();

【参考方案4】：

你看到的答案是作者未定义，这也出现whenever an instance is undefined but you try to access it's properties！ 例如：

 [(ngModel)]="author.name" // But author is undefined, it'll tell you that the 'name' is undefined, 
                           // instead of 'author' remember this.
    But if [(ngModel)]="author" // This will never cause an error

还有一点，author = ; 不能解决您的问题，您应该定义一个类（推荐），例如 author = new author('Fes', 'Nguyen');，因为如果您不为其初始化或设置值， 就没有属性！