Question

我有一个简单的表来对每个元组执行CRUD操作。单击编辑按钮时，对象'存储：OpenStore'将传递给editStore函数并调用MatDialog。单击“提交”按钮并关闭dialogRef后，对“对话框内的表单”进行更改后，数据将成功传递给“父”，但此时控件将移出editStore函数。

这是我的editStore功能： -

  editStore(store: OpenStore) {
  console.log(store);
  this.storeService.getStoreById(store.storeId).subscribe( response => {
    this.dialog.open(StoreEditComponent, {
      height: '450px', data: response.json() })
      .afterClosed().subscribe( response2 => {
        store = response2;
        console.log(store);
        this.cd.detectChanges();
    });
  });
  console.log(store);
 // this.router.navigate(['/stores/edit/' + storeId]);
}

问题陈述：正如许多教程中所提到的，他们在这些教程中获取了一组对象的帮助，并使用splice方法更新了Array。在使用数据库的实际情况中，我已经成功地将PUT请求放到数据库上以更新存储，并且将存储列表维护为数组并使用splice方法是不正确的。我也尝试手动调用ChangeDetectorRef，但这没有任何好处。我不得不更新对象 store ，它最初传递到afterClosed订阅方法中的editStore函数。

以下是我的观点快照： -

Snapshot of my View

我的守则如下： -

szastore-list.component.ts

import { Component, OnInit, DoCheck, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { StoreService } from '../services/store.service';
import { MatDialog, MatDialogRef } from '@angular/material';
import { StoreEditComponent } from '../storeedit/storeedit.component';
import { OpenStore } from '../model/openstore';
@Component({
  selector: 'sza-storelist',
  templateUrl: './szastore-list.component.html',
  styleUrls: ['./szastore-list.component.css']
})
export class SZAStoreListComponent implements OnInit {

  private stores: OpenStore[];

  constructor(private router: Router, private storeService: StoreService, 
private dialog: MatDialog, 
    private cd: ChangeDetectorRef) { }

  ngOnInit() {
    this.storeService.getStores()
    .subscribe(response => {
      this.stores = response.json();
    });
  }

  editStore(store: OpenStore) {
      console.log(store);
      this.storeService.getStoreById(store.storeId).subscribe( response => {
        this.dialog.open(StoreEditComponent, {
          height: '450px', data: response.json() })
          .afterClosed().subscribe( response2 => {
            store = response2;
            console.log(store);
            this.cd.detectChanges();
        });
     });
      console.log(store);
     // this.router.navigate(['/stores/edit/' + storeId]);
  }
}

storeedit.component.ts

import { Component, OnInit, Inject, Optional } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { OpenStore } from '../model/openstore';
import { StoreService } from '../services/store.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'sza-storeedit',
  templateUrl: './storeedit.component.html',
  styleUrls: ['./storeedit.component.css']
})
export class StoreEditComponent implements OnInit {

  constructor(private storeService: StoreService, private route: ActivatedRoute,
    @Optional() @Inject(MAT_DIALOG_DATA) private store: OpenStore,
    public dialogRef: MatDialogRef<StoreEditComponent>) {
   }

  ngOnInit() {
  }

  submit(f: FormControl) {
    this.storeService.updateStore(f.value).subscribe(response => {
      this.store  = f.value;
      this.dialogRef.close(f.value);
    });
  }
}

storeedit.component.html

          <tbody>
            <tr *ngFor="let store of stores">
              <td>{{store.storeName}}</td>
              <td>{{store.storeURL}}</td>
            <td>
                <button mat-raised-button color="primary" (click)="editStore(store)">
                  <mat-icon aria-label="Edit Mode">edit_mode</mat-icon>
                </button>
            </td>
              <td>
              <button mat-raised-button color="warn" (click)="removeStore(store.storeId)">
                <mat-icon aria-label="Delete Mode">delete_mode</mat-icon>
              </button>
              </td>
            </tr>
          </tbody>

更改检测不会更新事后MatDialog AfterClosed

0 个答案: