角度を変更するブラウザを再読み込みする必要があります

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

あなたのサービスがどのように行われているのかわかりません。

だからあなたMaterialsServiceに、あなたは以下のようにBehaviorSubjectを宣言する必要があります：あなたのMaterialsListComponentで

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.')); 
    } 
    ... 
} 

、あなたが観測を購読する：

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> 

このヘルプが必要です。

Answer 2

モーダルが閉じているときにgetAllMaterial（）を呼び出す必要があります（ユーザーが開いたモーダルでいくつかのマテリアルを追加したと仮定して）

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