如何使用 Angular 对话框刷新 Angular Mat-Table 添加数据

Question

我想在添加一个项目后刷新垫表中的项目。但是在我的表中没有使用对话框模块更新。我已经尝试过，通过 viewchild 调用我的产品组件中的列表组件，但是，我无法更新表。没有使用对话框模块，我的垫表可以更新，但使用对话框无法更新我的表。

如何解决？

创建组件：

export class CreateComponent extends BaseComponent implements OnInit {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder,spiner: NgxSpinnerService, private productService: ProductService, private alertify: AlertifyService) {
    super(spiner)
  }
  
  ngOnInit(): void {
    this.userAddressValidations = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern('^[a-zA-Z ]*$')]],
      stock: ['', [Validators.required],Validators.min(0)],
      price: ['', [Validators.required],Validators.min(0)],
    
    });
  }

  @Output() createdProduct: EventEmitter<Create_Product> = new EventEmitter();

  create(name: HTMLInputElement, stock: HTMLInputElement, price: HTMLInputElement) {
    this.showSpinner(SpinnerType.BallAtom);
    const create_product: Create_Product = new Create_Product();
    create_product.name = name.value;
    create_product.stock = parseInt(stock.value);
    create_product.price = parseFloat(price.value);

    this.productService.create(create_product, () => {
      this.hideSpinner(SpinnerType.BallAtom);
      this.alertify.message("Ürün başarıyla eklenmiştir.", {
        dismissOthers: true,
        messageType: MessageType.Success,
        position: Position.TopRight
      });
      this.createdProduct.emit(create_product);
      
    }, errorMessage => {
      this.alertify.message(errorMessage,
        {
          dismissOthers: true,
          messageType: MessageType.Error,
          position: Position.TopRight
        });
    });
  }
}

对话服务：

export class DialogService {

  constructor(private dialog: MatDialog) { }
  

  openDialog(dialogParameters: Partial<DialogParameters>): void {
    const dialogRef = this.dialog.open(dialogParameters.componentType, {
      width: dialogParameters.options?.width,
      height: dialogParameters.options?.height,
      position: dialogParameters.options?.position,
      data: dialogParameters.data,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result == dialogParameters.data)
        dialogParameters.afterClosed();
    });
  }

  
}

export class DialogParameters {
  componentType: ComponentType<any>;
  data: any;
  afterClosed: () => void;
  options?: Partial<DialogOptions> = new DialogOptions();
}

export class DialogOptions {
  width?: string = "250px";
  height?: string;
  position?: DialogPosition;
}

产品组成：

export class ProductsComponent extends BaseComponent implements OnInit {

  constructor(spinner: NgxSpinnerService, private httpClientService: HttpClientService, private dialogService: DialogService,private dialog:MatDialog) {
    super(spinner)
  }

  createProduct() {
    
    this.dialogService.openDialog({

      componentType: CreateComponent,
      data: null,
      options: {
        width: "500px"
      },
      afterClosed: () => { }
    },
    );
    
  }

  ngOnInit(): void {
   
  }
}

HTML

<button style="margin:15px;font-size: 17px;text-align: center;align-content: center;" mat-raised-button class="btn" color="primary" (click)="createProduct()">



   @ViewChild(ListComponent) listComponents: ListComponent;

   createdProduct(createdProduct: Create_Product) {
    this.listComponents.getProducts();
     console.log(this.listComponents);
   }

Answer 1

当您打开对话框时，在

data

属性内传递一个回调函数，这将调用 viewChild。当我们传递函数时，我们使用

bind(this)

，这将确保函数在源组件上下文（子视图存在的地方）中执行。

refresh() { this.listComponents.getProducts(); }

this.dialogService.openDialog({

  componentType: CreateComponent,
  data: { callback: this.refresh.bind(this) },
  options: {
    width: "500px"
  },
  afterClosed: () => { }
},
); 

然后我们通过

data

访问配置，如下所示。

constructor(
 ...
 @Inject(MAT_DIALOG_DATA) public data,
 ...
) { }

create(name: HTMLInputElement, stock: HTMLInputElement, price: HTMLInputElement) {
    ...
    this.productService.create(create_product, () => {
      ...
      if(data.callback) {
          data.callback();
      }
      ...