Mat-Dialog Angular

Question

我正在创建一个Dialog ，当我选择一个值时，它将填充到input fields中，但现在我试图在FormArray中创建一个hidden button ，当我选择 true 时将显示该按钮，但如果我选择 False 它不会显示隐藏按钮如何实现？

这是我到目前为止所做的

https://stackblitz.com/edit/mat-dialog-example-wvsgaj

Answer 1

我已经分叉了你的样品。 看到这个。 https://stackblitz.com/edit/mat-dialog-example-gheonh

在item中添加了showButton属性。

item(): FormGroup {
  return this.fb.group({
    qty: [10],
    total: [],
    showButton: false, // here
  });
}

然后在afterClosed中设置此属性。

dialogRef.afterClosed().subscribe((result) => {
  const showButton = result.symbol;
  (this.fg.get('Info') as FormArray)
    .at(index)
    .get('showButton')
    ?.patchValue(showButton);
});

在 html 中，使用此值切换显示或隐藏。

<button
  mat-raised-button
  color="primary"
  class="row"
  *ngIf="Info.get('showButton').value"
>
   TriggerButton
</button>