각도를 변경하여 브라우저를 다시로드해야합니다.

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

I을 볼 수 있습니다 전에 그것은 여전히 ​​새로 고쳐야 사용자가 모달을 닫을 때 getAllMaterial()을 호출해야합니다 (사용자가 열린 모달을 통해 일부 자료를 추가했다고 가정)

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