web-dev-qa-db-ja.com

Angular Materialテーブル内の入力フィールドにアクセスする

Angular Material Table。内の入力フィールドからデータを取得するために何日も試みてきました。

基本的にはAPIからの値をテーブルに入力していますが、日付を取得できない場合は常に、私の場合はコースにスケジュールされた日付が設定されていないため、値を表示するテキストボックスを挿入していますそのため、ユーザーはその特定のコースの日付を設定できます。

このような： - Example注：検閲のため申し訳ありませんが、仕事に関連する名前は削除する必要がありました。

これは私のhtmlコードです：

<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コードです：

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（）を呼び出すと、TypeScriptで定義されているように研修生IDとコースIDがコンソールに正しく記録されますが、インターフェースで選択した日付をどのように持ってくるべきかについてのアイデアはありませんが、ng-modelで試しましたが、それは機能せず、入力ごとにフォームを定義する必要がありましたが、それでも機能しませんでした。

保存ボタンが押されたときに各行の入力からその値を取得する方法はありますか？

または、それらのすべてに1つのボタンを置いた場合、インターフェースのすべての入力値でforeachを行う方法はありますか？

javascripthtmlangularangular-material
6
ACristian24

インデックスを属性として使用して、すべての値を含むオブジェクトを作成することにより、ngModelで値を取得できます。

コンポーネントに、オブジェクトを配置します。

public myDates : any = {};

次に、ngModelを入力日付のインデックスとともに使用します。

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

次に、行のインデックスを知ることで値を取得できます。ボタンをクリックすると、直接取得できます。

<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>
6
Powkachu