Блог

Я пытаюсь извлечь выбранные значения флажков и отобразить их в окне предупреждения. В настоящее время у меня есть это, чтобы, когда пользователь выбирает флажок и нажимает кнопку, он регистрировал массив в консоли. Я хочу отобразить эти параметры в окне предупреждения, но в настоящее время окно отображается неопределенным. Я сохраняю значения и зацикливаюсь на массиве в одном компоненте и использую декоратор @Input для извлечения значений в другом компоненте, где я также буду выполнять вычисления (в конечном итоге).

услуги.компонент.ts

 export class ServicesComponent {

  serviceForm: FormGroup;

  name: string;

  serviceData = [{
      serviceName: "Password Reset",
      servicePrice: 39.99,
      checked: false,
    },
    {
      serviceName: "Spyware Removal",
      servicePrice: 99.99,
      checked: false,
    }
  ];

  get servicesFormArray() {
    return this.serviceForm.controls.orders as FormArray;
  }

  constructor(
    private formBuilder: FormBuilder,
    private _snackBar: MatSnackBar
  ) {
    this.serviceForm = this.formBuilder.group({
      orders: new FormArray([]),
    });

    this.addCheckboxesToForm();
  }

  private addCheckboxesToForm() {
    this.serviceData.forEach(() =>
      this.servicesFormArray.push(new FormControl(false))
    );
  }

  openSnackBar(message: string) {
    this._snackBar.open(message   " was added!");
  }

  submit() {
    const selectedServices = this.serviceForm.value.orders
      .map((checked, i) => (checked ? this.serviceData[i].serviceName : null))
      .filter((v) => v !== null);
    console.log(selectedServices);
  }
}
 

счет-фактура.компонент.ts (где я пытаюсь показать выбранные параметры)

 @Component({
  selector: 'services',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.css']
})

export class InvoiceComponent {

  @Input() selectedServices: string;
  
  constructor(public dialog: MatDialog) {}

  }

  displayValues() {

    alert(this.selectedServices);

  }
}

}
 

also my services component

   <form [formGroup] = "serviceForm" (ngSubmit) = "submit()">
    <label formArrayName="orders" *ngFor="let order of servicesFormArray.controls; let i = index">
      {{serviceData[i].serviceName}}
      {{"$"   serviceData[i].servicePrice}}
      <input type = "checkbox" (change)="openSnackBar(serviceData[i].serviceName)" [formControlName] = "i" style="display: block;" >


    </label>
    <br/>
    <br/>

    <mat-form-field appearance="fill">
      <mat-label>What's your name?</mat-label>
      <input matInput [(ngModel)]="name">
    </mat-form-field>

    <button mat-raised-button (click)="invoice.calculateInvoice()">Calculate Invoice</button>
    <services #invoice></services>
  </form>