Как добавить новый объект в таблицу материалов путем ввода данных пользователем? - PullRequest
Новая
       26

Как добавить новый объект в таблицу материалов путем ввода данных пользователем?

0 голосов
/ 04 октября 2018

Я пытаюсь создать приложение, которое позволит мне добавить нового пользователя в таблицу.Я получаю сообщение об ошибке:

"Свойство 'user' не существует для типа '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;
}

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

«Свойство« пользователь »не существует для типа« BugTableComponent »»

Эта ошибка означает именно то, что сказано - у класса BugTableComponent нет свойства с именем «пользователь», и этоочевидно в вашем примере кода.Вы пытаетесь использовать свойство '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;
}
0 голосов
/ 05 октября 2018

Вот мой ответ.

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

Когда вы нажимаете кнопку «Отправить», новые пользователи будут заполняться в таблице соответствия.

0 голосов
/ 04 октября 2018

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