Angular - 形式使其他元素不可读答案

【问题标题】：Angular - form makes other elements unreadableAngular - 形式使其他元素不可读
【发布时间】：2022-08-03 20:56:59
【问题描述】：

我有一个页面来维护应用程序的所有用户。在此应用程序中，您首先会看到所有用户的列表。当您单击用户时，您会看到详细信息并可以选择更改/删除。这工作正常。比我添加一个额外的部分来添加用户\'voeg gebruiker toe\'。这包含一个表格。当我添加表单时，页面突然无法读取用户的属性。尽管它仍在接收它们，但您可以通过创建的正确数量的项目符号来看到它们。我发现了 2 个有类似错误的主题：

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading \'name\')

Getting undefined when submitting form using ngForm

但是这两个主题都提到了不使用 *NgIf 引起的问题。但这不是我的问题，因为列表应该只在页面创建时生成，而不取决于选定的用户。如果我添加 (*ngIf=\"users\")，页面将不再显示任何列表。我看不到我的表单如何干扰 findAll() 代码。我非常感谢不必为它制作另一个组件。所以我需要用另一种方式解决它。

输出截图：

您可以在下面找到我的 html en 组件：

零件：

import { Component, OnInit } from \'@angular/core\';
import { UserZnPass } from \'src/app/model/UserZnPass\';
import { User } from \'../../model/User\';
import { UserService } from \'../../services/user.service\';

@Component({
  selector: \'app-user\',
  templateUrl: \'./user.component.html\',
  styleUrls: [\'./user.component.css\']
})

export class UserComponent implements OnInit {
  users!:User[];
  selectedUser!: User;
  newUser!: UserZnPass;

  onClick(user:User): void {
    this.selectedUser = user;
  }

  constructor(private userService:UserService) { }

  ngOnInit(): void {
    this.userService.getAllUsers().subscribe(user => { this.users = user});
  }

  add(): void {
    if(!
      this.newUser.naam.trim() || this.newUser.voornaam.trim() || this.newUser.email.trim() ||
      this.newUser.role.trim()) { return;}
      this.userService.addUser({
        naam: this.newUser.naam, voornaam: this.newUser.voornaam, email: this.newUser.email, 
        role: \"ROLE_\" + this.newUser.role.toUpperCase()
      } as UserZnPass)
          .subscribe(user => { 
              this.users.push(user);
              this.newUser = {} as User;
            });
  
  }

}

html

<h1>Users</h1>

<ul>
    <li *ngFor=\"let user of users\" (click)=\"onClick(user)\">{{user.naam}} {{user.voornaam}}
    </li>
    
</ul>
<app-user-detail [user]=\"selectedUser\"></app-user-detail>


<h2>Voeg gebruiker toe</h2>

<div>
    <form>
        <div class=\"form-group\">
            <label>naam:
                <input [(ngModel)]=\"newUser.naam\" name=\"userNaam\">
            </label>
        </div>
        <div class=\"form-group\">
            <label>voornaam:
                <input [(ngModel)]=\"newUser.voornaam\" name=\"userVoornaam\">
            </label>
        </div>
        <div class=\"form-group\">
            <label>email:
                <input [(ngModel)]=\"newUser.email\" name=\"userEmail\">
            </label>
        </div>
        <div class=\"form-group\">
            <label>role:
                <select>
                    <option [(ngModel)]=\"newUser.role\" value=\"USER\">User</option>
                    <option [(ngModel)]=\"newUser.role\" value=\"ADMIN\">Admin</option>
                </select>
            </label>     
        </div> 
             <button class=\"btn\" (click)=\"add()\">Toevoegen</button>
    </form>

</div>

标签： javascript html angular forms

【解决方案1】：

你必须初始化newUser：

 constructor(private userService:UserService) {
   this.newUser = new UserZnPass();
 }

或者

add(): void {
   if(!this.newUser){
        this.newUser = new UserZnPass();
    }
    ...
     
}

【讨论】：