javascript-访问Angular Material表内的输入字段
作者：互联网
我一直在尝试从Angular Material Table内的输入字段中获取数据的方法.
我基本上是用来自API的值填充表格,但是,每当我们没有得到任何日期时,就我而言,一门课程没有设置预定的日期,我正在插入一个文本框,在其中应显示该值因此用户可以为该特定课程设置日期.
像这样：
注意：很抱歉,必须删除与工作相关的名称.
这是我的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()时,受训者ID和课程ID正确地记录在控制台中,如打字稿中定义的那样,但是我不知道如何将所选的日期带入界面,我尝试了ng-model但它没有用,我必须为每个输入定义一个表格,但仍然没有用.
按下“保存”按钮时,是否有任何方法可以从每一行的输入中获取该值？
或者如果我为所有按钮都放一个按钮,是否有办法对界面中的每个输入值进行foreach？
解决方法:
您可以使用ngModel通过使用index作为属性创建一个包含所有值的对象来获取值.
在您的组件中,放置一个对象：
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>
标签：angular,angular-material,html,javascript 来源： https://codeday.me/bug/20191108/2009183.html