几天来我一直在尝试从角度材质表内的输入字段获取数据。
我基本上是用来自 API 的值填充表格，但是每当我们没有获得任何日期时，在我的情况下，课程没有设置预定日期，我会插入一个文本框，其中应显示该值这样用户就可以为该特定课程设置日期。
Like this:
Note: Sorry for the censoring, work related names had to be removed.
这是我的 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 但是它不起作用，我必须为每个输入定义一个表单，但仍然不起作用。
当按下“保存”按钮时，有什么方法可以从每行的输入中获取该值吗？
或者，如果我为所有这些按钮放置 1 个按钮，是否有任何方法可以对界面中的每个输入值执行 foreach 操作？
您可以通过使用索引作为属性创建包含所有值的对象来使用 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>