如何保存一个垫表并在另一个表中列出其值？

Question

我正在创建一个时间表组件，所以我有添加表供用户在表中输入值。注意：该表具有主题，开始时间和结束时间的内联字段。 （有关添加表，请参考下图） 因此，当在上表中添加字段时，我希望将其保存并填充到打击图像中显示的表中。 我还分别添加了添加和列出的代码。

时间表添加component.html：

<form [formGroup]="form">
    <div class="example-container mat-elevation-z8">
        <mat-table #table [dataSource]="dataSource">

            <ng-container matColumnDef="day">
                <mat-header-cell *matHeaderCellDef> Days </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.day}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="period1">
                <mat-header-cell *matHeaderCellDef> Period 1 <br>
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br> &nbsp;&nbsp;
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>

                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select formControlName = "subjects1"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container> &nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period2">
                <mat-header-cell *matHeaderCellDef> Period 2
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker> </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects2"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period3">
                <mat-header-cell *matHeaderCellDef> Period 3
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select formControlName = "subjects3"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period4">
                <mat-header-cell *matHeaderCellDef> Period 4
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects4"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period5">
                <mat-header-cell *matHeaderCellDef> Period 5
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects5"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period6">
                <mat-header-cell *matHeaderCellDef> Period 6
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects6"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period7">
                <mat-header-cell *matHeaderCellDef> Period 7
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects7"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period8">
                <mat-header-cell *matHeaderCellDef> Period 8
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select formControlName = "subjects8"  placeholder="Subjects">

                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period9">
                <mat-header-cell *matHeaderCellDef> Period 9
                    <input matInput placeholder="Enter start time" [ngxTimepicker]="editableDial" readonly formControlName="startTime">
                    <ngx-material-timepicker #editableDial  [enableKeyboardInput]="true"></ngx-material-timepicker>
                    <br>
                    <input matInput placeholder="Enter end time" [ngxTimepicker]="editableDiall" readonly formControlName="endTime">
                    <ngx-material-timepicker #editableDiall  [enableKeyboardInput]="true"></ngx-material-timepicker>
                </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <mat-form-field floatLabel="never">
                        <mat-select  formControlName = "subjects9"  placeholder="Subjects">
                            <mat-option *ngFor="let subject of subjects" [value]="subject" >{{subject}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>


            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
    </div>
    <br>
    <div class="row" style="align-content: center">
        <div class="col-md-2"><button class="btn btn-success" (click)="add()">Add Timetable </button></div>
        <div class="col-md-2"><button class="btn btn-warning" (click)="reset()">Reset Timetable </button></div>
        <div class="col-md-2"><button class="btn btn-danger" (click)="cancel()">Cancel </button></div>
    </div>
</form>

添加时间表组件。ts：

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import TimeTableModel from "../time-table.model";
import {MatDialog, MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
import {ValidationService} from "../../../../../service/validation-service";
import {Router} from "@angular/router";


@Component({
  selector: 'app-add-timetable',
  templateUrl: './add-timetable.component.html',
  styleUrls: ['./add-timetable.component.scss']
})
export class AddTimetableComponent implements OnInit {


    'subjects' = [ "English", "Maths", "Science", "Social", "Tamil"];
    form: FormGroup;

    timetable: TimeTableModel;
    displayedColumns: string[] = ['day', 'period1','period2','period3','period4', 'period5', 'period6', 'period7', 'period8', 'period9'];
    columnsToDisplay: string[] = this.displayedColumns.slice();
    dataSource = new MatTableDataSource(<any>ELEMENT_DATA);
    sectionName: string = null;

    public show: boolean = false;


    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor( private formBuilder: FormBuilder,
                 public dialog: MatDialog,
                 private router: Router) { }

    ngOnInit() {
        this.form = this.formBuilder.group({
            subjects1: new FormControl('', Validators.required),
            subjects2: new FormControl('', Validators.required),
            subjects3: new FormControl('', Validators.required),
            subjects4: new FormControl('', Validators.required),
            subjects5: new FormControl('', Validators.required),
            subjects6: new FormControl('', Validators.required),
            subjects7: new FormControl('', Validators.required),
            subjects8: new FormControl('', Validators.required),
            subjects9: new FormControl('', Validators.required),
            subjectNameMonday: new FormControl(this.subjects[0], Validators.required),
            subjectName: new FormControl(this.subjects[0], Validators.required),
            startTime: ['', ValidationService.requiredField],
            endTime: ['', ValidationService.requiredField],
        });
    }
    cancel() {
        this.router.navigate(['admin/time-table']);
    }


    onSubmit(){
        console.log(this.form);
    }
addOrEdit(id: any = -1) {
        let dialogRef = this.dialog.open(AddTimetableComponent,{
            width: '1200px',
            data: {
                titleLabel: (id == -1) ? 'Add' : 'Edit',
                isEditAction: (id == -1) ? false : true,
                //editData: (id == -1) ? '' : this.timeTable[id]
            },
            disableClose: true,
            //width: '50vw',
            //panelClass: this.commonUtilService.getPanelClass('full-screen-dialog'),
        });


    }
    add(){
        console.log(this.form);
    }
    reset(){
        this.form.reset();
    }
    toggle(){
        this.show = !this.show;
    }
}
export interface Element {

    day: string;
    period1: string;
    period2: string;
    period3: string;
    period4: string;
    period5: string;
    period6: string;
    period7: string;
    period8: string;
    period9: string;
}

// @ts-ignore
const ELEMENT_DATA: Element[] = [
    { day: 'Monday',period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: ""},
    { day: 'Tuesday', period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: ""},
    { day: 'Wednesday',period1: "",period2: "",period3: "",period4: "" ,period5: "",period6: "",period7: "",period8: "",period9: ""},
    { day: 'Thursday',  period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: "" },
    { day: 'Friday',  period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: "" },
    { day: 'Saturday',  period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: "" },
    { day: 'Sunday', period1: "",period2: "",period3: "",period4: "",period5: "",period6: "",period7: "",period8: "",period9: "" },
];

时间表列表component.html：

<p align="center"><button mat-raised-button [routerLink]="['add-timetable']">Add Timetable </button></p><br>
    <div class="example-container mat-elevation-z8">
        <mat-table #table [dataSource]="dataSource">

            <ng-container matColumnDef="day" sticky>
                <mat-header-cell *matHeaderCellDef> Days </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.day}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="period1">
                <mat-header-cell *matHeaderCellDef> Period 1 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period1}}
                </mat-cell>
            </ng-container> &nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period2">
                <mat-header-cell *matHeaderCellDef> Period 2 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period2}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period3">
                <mat-header-cell *matHeaderCellDef> Period 3 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period3}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period4">
                <mat-header-cell *matHeaderCellDef> Period 4 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period4}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period5">
                <mat-header-cell *matHeaderCellDef> Period 5 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period5}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period6">
                <mat-header-cell *matHeaderCellDef> Period 6 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period6}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period7">
                <mat-header-cell *matHeaderCellDef> Period 7 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period7}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period8">
                <mat-header-cell *matHeaderCellDef> Period 8 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period8}}
                </mat-cell>
            </ng-container>&nbsp;&nbsp;&nbsp;

            <ng-container matColumnDef="period9">
                <mat-header-cell *matHeaderCellDef> Period 9 </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.period9}}
                </mat-cell>
            </ng-container>


            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
    </div>
    <br>