需要重新加載瀏覽器才能看到角度的變化

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如下：

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，您訂閱的可觀察：

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)}`; 
     }); 
}