Question

我通过ng-bootstrap模式添加我的数据，但是我有一个问题，因为当我点击添加按钮时，它需要刷新才能看到新添加的数据。我成功添加产品时已经调用了this.getMaterials（）但是在我看到新添加的数据之前仍需要刷新它

export class MaterialsListComponent implements OnInit {
  closeResult: string;
    materials: any;
    subscription: Subscription;

  constructor(private modalService: NgbModal, private materialsService: MaterialsService) { }

  ngOnInit() {
    this.getAllMaterials();
  }

  getAllMaterials() {
    this.subscription = this.materialsService.getAll()
        .subscribe(
          (data:any) => {
            this.materials = data;
            console.log(data);
          },
          error => {
           console.log(error);
          });
  }

  onCreateMaterial(form: NgForm){
    const name = form.value.name;
    const description = form.value.description;
    this.materialsService.addMaterial(name, description)
      .subscribe(
          data => {
            this.getAllMaterials();
            console.log(data);
          },
          error => {
             console.log(error);
          });
  }

  open(content) {
      this.modalService.open(content).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
    }

    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return  `with: ${reason}`;
      }
    }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

服务

export class MaterialsService {
  url = AppSettings;
  materials: any;

  constructor(private httpClient: HttpClient) {}

 getAll() {
    if(!this.materials) {
        this.materials = this.httpClient.get<any>(this.url)
                            .map((response => response))   
                            .publishReplay(1)
                            .refCount();

    }
    return this.materials;
  }

  addMaterial(name: string, description: string) {
    return this.httpClient
    .post(
       this.url, 
       JSON.stringify({ name, description})
    )
    .map((response: any) => {
         return response;
        });
  }

Answer 1

我会在模态关闭时调用getAllMaterial（）（假设用户已通过打开的模态添加了一些材料）

open(content) {
      this.modalService.open(content).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
        this.getAllMaterials();
      }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
}

Answer 2

我不知道你的服务是怎么做的。

所以在你的MaterialsService中，你应该声明一个BehaviorSubject如下：

import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs/BehaviorSubject'

@Injectable()
export class MaterialsService {
  materials: Observable<any[]> // any : your data type
  // store data
  private store: {
    materials: any[]
  };
  private _source: BehaviorSubject<any[]>;

  constructor(private http: Http) {
     this._source = <BehaviorSubject<any[]>>new BehaviorSubject([]);
     this.store = { materials: [] };

     this.materials = this._source.asObservable();
  }

  getAll() {
     this.http.get(`${this.baseUrl}/materials`).map(response => response.json())
       .subscribe(materials => {
         this.store.materials= materials;

         this._source.next(Object.assign({}, this.store).materials);
     }, error => console.log('Could not load materials.'));
  }

  addMaterial(name, description) {
     this.http.post(`${this.baseUrl}/materials`, JSON.stringify({name, description}))
      .map(response => response.json()).subscribe(data => {
         this.store.materials.push(data);

         this._source.next(Object.assign({}, this.store).materials);
     }, error => console.log('Could not add material.'));
  }
  ...
}

在您的MaterialsListComponent中，您订阅了一个Observable：

export class MaterialsListComponent implements OnInit {
  materials: Observable<any[]>;

  constructor(private modalService: NgbModal,
              private materialsService: MaterialsService) { }

  ngOnInit() {
    this.materials = this.materialsService.materials;
  }
}

每次从Observable Angular发出的新值都会更新视图。

<!-- Async pipe is used to bind an observable directly in your template -->
<div *ngFor="let item of materials | async">
  {{ item.name }}
</div>

希望这有帮助！

需要重新加载浏览器以查看Angular中的更改

2 个答案: