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

时间：2018-10-04 13:39:32

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

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

  

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

我使用的是材料模板，没有一个模板可以让我精确地完成我想做的事情。据我了解，问题在于现有数组位于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>

TypeScript：

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

4 个答案:

答案 0 :(得分：0)

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

}

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>

答案 1 :(得分：0)

  

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

此错误的含义与所说的完全一样-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;
}

答案 2 :(得分：0)

这是我的答案。

在.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表中。

答案 3 :(得分：0)

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

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


}
相关问题
最新问题