访问 Angular Material 表中的输入字段 [英] Accessing Input fields inside Angular Material table

问题描述

我几天来一直在尝试从 Angular Material Table 内的输入字段中获取数据.

I've been trying for days to get data from input fields inside an Angular Material Table.

我基本上是用来自 API 的值填充表，但是每当我们没有得到任何日期时，在我的情况下，课程没有设置预定日期，我插入一个文本框，其中的值应显示，以便用户可以为该特定课程设置日期.

I am basically populating a table with values that come from an API, however whenever we don't get any date, in my case a course doesn't have a scheduled date set, i am inserting a text box where the value should be displayed so the user can set a date for that specific course.

像这样:注意:抱歉审查，必须删除与工作相关的名称.

这是我的 html 代码:

This is my html code:

<mat-card>
    <form  #traineeForm="ngForm">
      <mat-form-field>
        <input  readonly matInput type="text" name="name" [ngModel] = "trainee.name"  #name="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput email type="text"  name="email" [ngModel] = "trainee.email" #email="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput type="text"  name="type" [ngModel] = "trainee.type" #type="ngModel">
      </mat-form-field>
      <button mat-raised-button color ="primary" type ="submit">Edit</button>
      <button mat-raised-button color ="warn" type ="submit" (click)="onDelete(trainee.id)">Delete</button>
    </form>
  </mat-card>
<br>
  <mat-card>
    
      <table mat-table [dataSource]="courses" class="mat-elevation-z8">
      
      <ng-container matColumnDef="courseOrderID">
        <th mat-header-cell *matHeaderCellDef>Course Order ID</th>
        <td mat-cell *matCellDef="let element"> {{element.courseOrderID}}</td>
      </ng-container>
      
       <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef>Course Title </th>
          <td mat-cell *matCellDef="let element"> {{element.title}}</td>
      </ng-container>
      <ng-container matColumnDef="description">
          <th mat-header-cell *matHeaderCellDef>Course Description </th>
          <td mat-cell *matCellDef="let element"> {{element.description}}</td>
       </ng-container>
      <ng-container matColumnDef="duration">
          <th mat-header-cell *matHeaderCellDef>Duration </th>
          <td mat-cell *matCellDef="let element"> {{element.duration}}</td>
      </ng-container>
      <ng-container matColumnDef="scheduledDate">
        <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
      <td mat-cell *matCellDef="let element">
         <mat-form-field>
              <input matInput [matDatepicker]="picker" placeholder="Choose a date">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
         {{element.scheduledDate}}</td>
      </ng-container>
      <ng-container matColumnDef="trainer">
          <th mat-header-cell *matHeaderCellDef>Trainer </th>
          <td mat-cell *matCellDef="let element">
              <mat-form-field><input matInput color="warn" *ngIf="!element.trainer"></mat-form-field> {{element.trainer}}</td>
      </ng-container>
      <ng-container matColumnDef="save">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element">
              <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, picker)">Save</button></td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="coursesdisplayColumns">
      </tr>
      <tr mat-row *matRowDef="let courses; columns: coursesdisplayColumns"></tr>
      </table>
      <br>
 
      </mat-card>

这是我的 TypeScript 代码:

And this is my TypeScript code:

import { Trainee } from '../trainees.model';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TraineesService } from '../../trainees.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Course } from '../../courses/courses.model';
import { CoursesService } from '../../courses.service';
import { Assignment } from '../../assignments/assignments.model';
import { NgForm } from '@angular/forms';

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


export class TraineeDetailsComponent implements OnInit, OnDestroy {
  
  private traineeId: string;
  trainee: Trainee;
  assignment: Assignment;
  courses: Course[] = [];
  coursesdisplayColumns = ['courseOrderID', 'title','description','duration','scheduledDate','trainer','save'];
  
  constructor(public traineeService: TraineesService, public route: ActivatedRoute, public coursesService: CoursesService){}

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if(paramMap.has('traineeId')){
        this.traineeId = paramMap.get('traineeId');
        this.trainee = this.traineeService.getTrainee(this.traineeId);
      }
    });
    this.coursesService.getCoursesByJob(this.trainee.job);
    this.coursesService.getCoursesUpdateListener().subscribe((courses: Course[]) =>{
      this.courses = courses;
    });
  }

  onDelete(traineeId: string)
  {
    this.traineeService.deleteTrainee(traineeId);
  }
  onSaveAssignment(trainee: Trainee, selectedCourse: Course, dateForm: Date){
  
    console.log(trainee.id);
    console.log(selectedCourse.description);
    console.log(dateForm);
  }
  ngOnDestroy() {

  }
}

当我调用 onSaveAssignment() 时，学员 ID 和课程 ID 正确地登录到控制台，因为它们在打字稿中定义，但我不知道我应该如何在界面中选择该日期，我尝试使用 ng-model 但它不起作用，我不得不为每个输入定义一个表单，但仍然不起作用.

When i call onSaveAssignment(), the trainee ID and course ID are getting logged in the console correctly as those are defined in typescript, but I have no ideea how should i bring that date selected in the interface, i tried with ng-model but it did not work and I had to define a form for each input and still did not work.

有没有办法在按下保存"按钮时从每一行的输入中获取这些值?

Is there any way to get that values from inputs on each row when the Save button is pressed ?

或者，如果我为所有这些按钮放置 1 个按钮，有没有办法对界面中的每个输入值执行 foreach?

Or if i put 1 button for all of them is there any way to do a foreach on every input value in the interface ?

推荐答案

您可以使用 ngModel 通过创建一个包含使用索引作为属性的所有值的对象来获取值.

You can get the values with ngModel by creating an object containing all values using the index as attribute.

在你的组件中，放置一个对象:

In you component, put an object:

public myDates : any = {};

然后将 ngModel 与输入日期的索引一起使用:

Then use ngModel with the index for your input date:

<ng-container matColumnDef="scheduledDate">
  <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
  <td mat-cell *matCellDef="let element; let i = index">
    <mat-form-field>
      <input matInput [(ngModel)]="myDates[i]" [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </td>
</ng-container>

对于每一行，它会向对象myDates 添加一个属性.使用索引允许保证唯一性.您的对象将如下所示:{1: date1, 2: date2 ...}.

For each row, it will add an attribute to the object myDates. Using index permits to guarantee uniqueness. Your object will look like: {1: date1, 2: date2 ...}.

然后可以通过知道行的索引来获取值.点击按钮即可直接获取:

Then you can get the value by knowing the index of the row. You can get it directly when clicking on the button:

<ng-container matColumnDef="save">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element; let i = index">
    <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, myDates[i])">Save</button>
  </td>
</ng-container>

这篇关于访问 Angular Material 表中的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！