@Output() onChangedForm = new EventEmitter<any>();
@ViewChild('form') form: NgForm;
ngOnInit() {
this.form.valueChanges.subscribe( data => this.onChangedForm.emit(data));
}<child (onChangedForm)="onChangedForm($event)"></child>form: any;
onChangedForm(some: any) {
this.form = some;
}<mat-form-field>
<input matInput
placeholder="Номер модели"
formControlName="id"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let массив of массив$ | async"
[value]="массив.id">
{{ массив.id }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<input matInput
placeholder="Номер модели"
formControlName="другоеid"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let другойМассив of другойМассив$ | async"
[value]="другойМассив.id">
{{ другойМассив.id }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';
import {ContractsService} from '../shared/services/contracts.service';
import {Contract} from '../shared/models/contracts.model';
import {User} from '../../shared/models/user.model';
import {Job} from '../shared/models/jobs.model';
import {JobsService} from '../shared/services/jobs.service';
import {MatTableDataSource} from '@angular/material';
@Component({
selector: 'app-contract-form',
templateUrl: './contract-form.component.html',
styleUrls: ['./contract-form.component.scss']
})
export class ContractFormComponent implements OnInit, OnDestroy {
user: User;
contracts: Contract[] = [];
jobs: Job[] = [];
contractor: number;
sub1: Subscription;
sub2: Subscription;
public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource = new MatTableDataSource;
constructor(private contractsService: ContractsService,
private jobService: JobsService) {
}
ngOnInit(): void {
this.user = JSON.parse(window.localStorage.getItem('user'));
this.contractor = this.user.id;
this.sub2 = this.jobService.getAllJobs().subscribe((jobs: Job[]) => {
this.jobs = jobs;
});
this._getElementData();
}
private _getElementData(): void {
this.sub1 = this.contractsService.getContractsByContractor(this.contractor)
.subscribe((contracts: Contract[]) => {
contracts.forEach((c) => {
c.jobName = this.jobs.find(j => j.id === c.job).title;
});
this.dataSource.data = contracts;
});
}
ngOnDestroy() {
if (this.sub1) {
this.sub1.unsubscribe();
}
if (this.sub2) {
this.sub2.unsubscribe();
}
}
}<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>