Arrays 如何通过用户输入将新对象添加到材质表中？

我正在尝试创建一个应用程序，允许我向表中添加新用户。我得到的错误是：

“类型'BugTableComponent'上不存在属性'user'”

我使用的是材料模板，没有一个能让我精确地做我想做的事情。据我所知，问题在于现有数组位于

bugTablecomponent

之外，因此无法找到它。另一方面，如果我将数组放入组件中，表将无法“访问”它。 这样一个问题的解决方案是什么

请原谅我的技术语言太差了，我是新手

HTML:

---

MatTableDataSource是不可变数组。您需要在临时数组中推送新值，然后用新推送的表替换数据源表。示例代码：

user.component.ts：

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

export interface user {
  userName: string;
  age: number;
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {
  columnsToDisplay: string[] = ["userName", "age"];
  public USER_DATA: user[] = [
    { userName: "Wacco", age: 12 },
    { userName: "Wacca", age: 13 },
    { userName: "Waccu", age: 14 }
  ];
  public newUser = {userName: "ABC", age: 15};
  public myDataArray: any;

  addName() {
    const newUsersArray = this.USER_DATA;
    newUsersArray.push(this.newUser);
    this.myDataArray = [...newUsersArray];
    this.newUser = {userName:"", age: 0};
    console.warn(this.myDataArray);
  }

  constructor() {
    this.myDataArray = new MatTableDataSource<user>([...this.USER_DATA]);
  }

  ngOnInit() {}

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/material”导入{MatTableDataSource}；
导出接口用户{
用户名：字符串；
年龄：人数；
}
@组成部分({
选择器：“应用程序用户”，
templateUrl:“./user.component.html”，
样式URL:['./user.component.scss']
})
导出类UserComponent实现OnInit{
columnsToDisplay：字符串[]=[“用户名”，“年龄”]；
公共用户_数据：用户[]=[
{用户名：“Wacco”，年龄：12}，
{用户名：“Wacca”，年龄：13}，
{用户名：“Waccu”，年龄：14}
];
public newUser={用户名：“ABC”，年龄：15}；
公共myDataArray：任意；
addName（）{
const newUsersArray=this.USER\u数据；
newUsersArray.push（this.newUser）；
this.myDataArray=[…newUsersArray]；
this.newUser={userName:，年龄：0}；
console.warn（this.myDataArray）；
}
构造函数（）{
this.myDataArray=新MatTableDataSource（[…this.USER_DATA]）；
}
ngOnInit（）{}
}

User.component.html：

<mat-table #table [dataSource]="myDataArray" class="mat-elevation-z8">
  <ng-container matColumnDef="userName">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let user"><div> {{user.userName}} </div></mat-cell>
  </ng-container>
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef>Age</mat-header-cell>
    <mat-cell *matCellDef="let user"><div> {{user.age}} </div></mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
  <mat-row *matRowDef="let dataSource; columns: columnsToDisplay;"></mat-row>
</mat-table>
<p>
  <mat-form-field apparence="legacy">
    <mat-label>Name</mat-label>
    <input matInput [(ngModel)]="newUser.userName" type="text" name="newuserName" id="newuserName" class="form-control">
  </mat-form-field>

  <mat-form-field apparence="legacy">
    <mat-label>Age</mat-label>
    <input matInput [(ngModel)]="newUser.age" type="text" name="newuserAge" id="newAge" class="form-control">
  </mat-form-field>
</p>
<button mat-button type="button" (click)="addName()">submit</button>

名称
{{user.userName}
年龄
{{user.age}

名称
年龄

提交

“类型'BugTableComponent'上不存在属性'user'”

这个错误的意思正是所说的-BugTableComponent类没有名为“user”的属性，这在代码示例中很明显。您正试图使用“user”属性（例如，

this.user

），但尚未声明它。解决方案：

export class BugTableComponent {

    user: User = {
        userName: null,
        age: null
    };

    columnsToDisplay: string[] = ["userName", "age"];
    myDataArray = USER_DATA;

    addName() {
        this.myDataArray.push(this.user);
        this.user = {
            userName: null,
            age: null
        };
    }
}

let USER_DATA: User[] = [
    { userName: "Wacco", age: 12 },
    { userName: "Wacca", age: 13 },
    { userName: "Waccu", age: 14 }
];

export interface User {
    userName: string;
    age: number;
}

这是我的答案

在.html文件中

<mat-table #table [dataSource]="myDataArray" class="mat-elevation-z8">
    <ng-container matColumnDef="userName">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
   </ng-container>
   <ng-container matColumnDef="age">
     <th mat-header-cell *matHeaderCellDef>Age</th>
     <td mat-cell *matCellDef="let user"> {{user.age}} </td>
   </ng-container>
   <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
   <tr mat-row *matRowDef="let dataSource; columns: columnsToDisplay"></tr>
</mat-table>
<p>
   <mat-form-field apparence="legacy">
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="user.userName" type="text" name="newuserName" id="newuserName" class="form-control">
   </mat-form-field>

   <mat-form-field apparence="legacy">
      <mat-label>Age</mat-label>
      <input matInput [(ngModel)]="user.age" type="text" name="newuserAge" id="newAge" class="form-control">
   </mat-form-field>
</p>`enter code here`
<button mat-button type="button" (click)="addName()">submit</button>

在user.model.ts中

export class User {
   userName: string;
   age: number;
}

---

当您单击“提交”按钮时，新用户将填充到mat表中。

您可能需要另一个对象

user:user

来引用界面

user

，以便在其他地方使用它。您不能直接引用接口名称

User

并在其他位置访问其属性@AmitChigadani，只是一个谦逊的，出于好奇的问题。Wiktor已经定义了接口“user”。为什么你认为定义一个新的界面“用户”可以解决这个问题？@Shahana嗯，我没有要求创建新的界面

User

。我提到要创建一个名为

user:user

的接口引用或对象。在我的评论中，我按照编码标准将接口名

user

重构为

user

。如果不创建接口引用，则无法访问其属性。

<mat-table #table [dataSource]="myDataArray" class="mat-elevation-z8">
    <ng-container matColumnDef="userName">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
   </ng-container>
   <ng-container matColumnDef="age">
     <th mat-header-cell *matHeaderCellDef>Age</th>
     <td mat-cell *matCellDef="let user"> {{user.age}} </td>
   </ng-container>
   <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
   <tr mat-row *matRowDef="let dataSource; columns: columnsToDisplay"></tr>
</mat-table>
<p>
   <mat-form-field apparence="legacy">
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="user.userName" type="text" name="newuserName" id="newuserName" class="form-control">
   </mat-form-field>

   <mat-form-field apparence="legacy">
      <mat-label>Age</mat-label>
      <input matInput [(ngModel)]="user.age" type="text" name="newuserAge" id="newAge" class="form-control">
   </mat-form-field>
</p>`enter code here`
<button mat-button type="button" (click)="addName()">submit</button>

export class BugTableComponent {
    columnsToDisplay: string[] = ["userName", "age"];
    user = new User();
    userData = User[]= [
        { userName: "Wacco", age: 12 },
        { userName: "Wacca", age: 13 },
        { userName: "Waccu", age: 14 }
    ];
    myDataArray = new MatTableDataSource(this.userData);

    addName() {
       let newUser : User = {
          userName : this.user.userName,
          age : this.user.age
       }
       this.userData.push(newUser);
       this.myDataArray.data = this.userData;
    }
}

export class User {
   userName: string;
   age: number;
}