发生数据库更改时刷新Angular中的下拉列表

问题描述

我的HTML文件中有以下按钮：

<td width="75%" colspan="2">
   <button mat-raised-button color="primary" type="button" style='margin-right:5px' style='margin-left:auto' (click)="openAddProductDialog()">Add Product</button>
</td>

以及以下下拉菜单：

<td colspan="2" width="100%">
    <mat-form-field class="generate-full-width">
        <mat-select placeholder="Product" formControlName="product" name="product" (selectionChange)="getDefaultValues()">
            <mat-option *ngFor="let product of products" [value]="product.value">
                                    {{product.viewValue}}
            </mat-option>
        </mat-select>
        <mat-error *ngIf="submitted && hasError('product','required')">Product is required</mat-error>
    </mat-form-field>

单击此按钮后，将打开一个对话框，其中包含以下HTML文件：

form [formGroup]="form" (ngSubmit)="addProduct(form)">
  <h1 mat-dialog-title color="primary">Add Product</h1>
  <mat-dialog-content >
      <div style="width:100%;display: flex;flex-direction: column;">
    <mat-form-field>
      <input matInput formControlName="productId" placeholder="Enter the Product Name">
      <mat-error *ngIf="submitted && hasError('productId','required')">Product Name is required</mat-error>
    </mat-form-field>
    <mat-form-field>
      <input matInput formControlName="instances" placeholder="Enter Instances" numbersOnly>
      <mat-hint>Allow only numeric values</mat-hint>
    </mat-form-field>
</mat-dialog-actions>
</form>

有一个提交按钮，用于将产品保存到数据库。现在，每次我必须刷新网页时，新添加的产品都会在主窗体的下拉列表中反映出来。由于某些限制，无法将Live Reload添加到Web浏览器。我尝试使用onEvent和ngModel，但几乎破坏了应用程序。请帮助我。

以下是“添加产品”的组件：

@Component({
  selector: 'add-product-dialog',templateUrl: 'add-product-dialog.html',})
export class AddProductDialog implements OnInit {
  form: FormGroup;
  submitted: boolean = false;
  constructor(
    private fb: FormBuilder,public dialogRef: MatDialogRef<AddProductDialog>,private generateService: GenerateService,@Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      productId: ['',Validators.required],instances: ['']
    });
  }
  // add product 
  addProduct(form: FormGroup) {
    this.submitted= true;
    const { value,valid } = this.form;
    let productId = this.form.value.productId;
    let instances = this.form.value.instances;
    this.generateService.addNewProduct(productId,instances)
    .subscribe((data) => {
      console.log(data)
    })
    console.log(value)
    if (valid) {
      this.dialogRef.close(value);
    }

  }
  // validation for input fields
  public hasError = (controlName: string,errorName: string) => {
    return this.form.controls[controlName].hasError(errorName);
  }

}

以下是对话框的内容：

openAddProductDialog(): void {
    const dialogRef = this.dialog.open(AddProductDialog,{
      width: '450px',disableClose: true,autoFocus: true
    });

ngOnInit() {
    this.createForm();
    this.generateService.getProducts()
    .subscribe((data) => {
      console.log(data)
      this.allProducts = data;
      this.allProducts.forEach(element => {
        this.products.push({
          "value" : element["productId"],"viewValue" : element["productId"]
        })
        
      });
    });
    this.getDefaultConfig();
  }

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

这是主要形式。如有需要，可以提供其他任何信息。

在service.ts中为addProduct和getProduct添加组件：

addNewProduct(product: string,instances : number) {
    let headers = new HttpHeaders({
      'Content-Type': 'application/json'
    })

    let options = {headers:headers,observer: 'response'};

    let data = {
        "productId" : product,"instances" : instances
    }
let result : Observable<Object>= this.http.post(this.url+'/product/add',data,options);
    console.log("service response------>")
    return result;
  }

getProducts() {
    let headers = new HttpHeaders({
      'Content-Type': 'application/json'
    })

    let options = {headers:headers,observer: 'response'};
    let result : Observable<Object> = this.http.get(this.url+'/product/list',options);
    console.log(result);
    return result;

  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）