Angular Component 显示 [object Object] 而不是 value

Question

我有 2 个姓名和年龄输入字段，我需要在列表中显示我添加的每个用户。但是，显示的不是姓名和年龄：

[object Object] 的年龄是 [object Object]。

我的 app.Component.ts 文件是：

export class AppComponent {
     users = []

      addUser(name: string , age : number): void {
       const uniqueId = Math.random().toString(16)

       const newUser = {
           id: uniqueId,
           name,
           age
       }
       this.users.push(newUser)
   }
}

userList.component.ts 文件是：

export class UsersListComponent 
{
    @Input() users;
    @Output() adduserEvent = new EventEmitter<Object>()
    newUsername: string = ''
    newUserAge: number = 0

   setNewUserName (userName : string): void {
       this.newUsername = userName
   }

   setNewUserAge (userAge : string): void {
       this.newUserAge = parseInt(userAge)
   }

   addUser(): void {
       console.log(this.newUsername, this.newUserAge)
       this.adduserEvent.emit({name: this.newUsername , age: this.newUserAge})
       this.newUsername = ''
           this.newUserAge = 0
       }
}

HTML 部分是：

应用内：

<app-users-list [users] = users (adduserEvent)="addUser($event, $event)"></app-users-list>

在用户列表中：

<input #userName type="text" (change)="setNewUserName(userName.value)" [value] = "newUsername"/>
<input #userAge type="number" (change)="setNewUserAge(userAge.value)" [value] = "newUserAge"/>
<button (click) = "addUser()">Add new User</button>
<div *ngFor = "let user of users" class="user-container">
    <span>{{user.name}}'s age is {{user.age}}</span>   
</div>

Answer 1

在你的情况下 (adduserEvent)="addUser($event, $event)" $event 的值将是 {name: this.newUsername , age: this.newUserAge} 并且那是一个对象。当您传递该对象时，addUser 函数中的名称和年龄参数将是对象而不是字符串...

您应该更改为：(adduserEvent)="addUser($event.name, $event.age)" 或更改 addUser 函数以接受对象 a 参数：

(adduserEvent)="addUser($event)"

  addUser(user: {name: string, age: number}): void {
   const uniqueId = Math.random().toString(16)

   const newUser = {
       id: uniqueId,
       user.name,
       user.age
   }
   this.users.push(newUser)

}