如何通过用户输入将新对象添加到材料表中？答案

【问题标题】：How to add a new object into material table by user input?如何通过用户输入将新对象添加到材料表中？
【发布时间】：2019-03-09 22:25:45
【问题描述】：

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

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

我正在使用材料模板，但没有任何模板可以让我精确地做我想做的事情。据我了解，问题在于现有数组在bugTablecomponent 之外，因此无法找到。另一方面，如果我将数组放入组件中，则表格无法“访问”它。有什么办法可以解决这样的问题？

对不起，我的技术语言很差，我是新手。

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>

打字稿：

export class BugTableComponent {
  columnsToDisplay: string[] = ["userName", "age"];
  myDataArray = USER_DATA;

  addName() {
    this.myDataArray.push(this.user);
    this.user = {};
  }
}
let USER_DATA: user[] = [
  { userName: "Wacco", age: 12 },
  { userName: "Wacca", age: 13 },
  { userName: "Waccu", age: 14 }
];

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

【问题讨论】：

您可能需要另一个对象user: User 来引用接口User，以便您可以在其他地方使用它。您不能直接引用接口名称User 并在其他地方访问其属性。 stackblitz.com/edit/…
@AmitChigadani，只是一个谦虚的，出于好奇的问题。 Wiktor 已经定义了“用户”接口。为什么你认为定义一个新的界面“用户”会解决问题？
@Shahana 好吧，我没有要求创建新界面User。我提到要为该接口创建一个引用或对象，称为user: User。我根据编码标准在我的评论中将接口名称user 重构为User。如果不创建接口引用，我们就无法访问它的属性。

标签： arrays angular typescript html-table angular-material

【解决方案1】：

这是我的答案。

在 .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>

在 .ts 文件中

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;
    }
}

在 user.model.ts 中

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

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

【讨论】：

【解决方案2】：

MatTableDataSource 是不可变数组。您需要将新值推送到临时数组中，然后将 dataSource 表替换为新推送的表。示例代码：

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() {}

}

用户.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>

【讨论】：

【解决方案3】：

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

这个错误的意思是准确的 - BugTableComponent 类没有名为“用户”的属性，这在您的代码示例中很明显。您正在尝试使用“用户”属性（例如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;
}

【讨论】：

【解决方案4】：

这适用于将新对象添加到材料表中。

HTML：

<table 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>
    </table>

<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><br>
          
<mat-form-field apparence="legacy">
    <mat-label>Age</mat-label>
    <input matInput [(ngModel)]="newUser.age" type="text" name="age" id="age" class="form-control">
</mat-form-field><br>

<button mat-raised-button color="primary" (click)="addUser()">submit</button>

components.ts：

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


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


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

export class AppComponent 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: 10};
  public myDataArray: any;

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

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

  ngOnInit() {}


}

【讨论】：