基於布爾值添加/刪除對象到數組 - angular 2 +/Ionic 2+

Question

我有一個項目列表。我原來下拉。這是一個對象數組。然後我會發出一個請求，檢查是否有任何內容從這個新的端點改變爲這個數組。如果一個對象已經添加到這個數組，那麼我需要以某種方式顯示這個數組與添加的對象。因此將新對象插入舊數組中。我會怎麼做呢？謝謝！

Answer 1

此方法適用於單獨使用Angular或使用Ionic Framework。
您可以使用以其Observable，Subject，BehaviorSubject等已知的RxJs庫。

您需要訂閱要更改的對象/數據。

我選擇了這個例子的主題，因此沒有添加一個初始值。你可以走另一條路，做這個

watcher = new BehaviorSubject(objArr); 

它將與= [{}，{}]設置爲它的objArr的價值開始。

下面是一個關於如何去解決這個問題的簡單例子。

import {AfterContentInit, Component, OnInit} from '@angular/core'; 
 
import {Subject} from "rxjs/Subject"; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    styleUrls: ['./app.component.css'], 
 
    template: ` 
 
    <h1> Keep watch on new additions to Array </h1> 
 
    <button (click)="addObj({name: 'Doe', age: 30})">Add Object</button> 
 
    <div *ngFor="let item of objArr"> 
 
     <ul> 
 
     <li> Name: {{item.name}}, Age: {{item.age}}</li> 
 
     </ul> 
 
    </div> 
 
    ` 
 
}) 
 

 
export class AppComponent implements OnInit, AfterContentInit { 
 

 
    //// lets say it is where the data is coming from and into. 
 
    objArr = [ 
 
    { 
 
     name: 'John', 
 
     age: 20 
 
    }, 
 
    { 
 
     name: 'Jane', 
 
     age: 21 
 
    } 
 
    ]; 
 

 
    watcher = new Subject(); 
 

 
    constructor() {} 
 

 
    ngOnInit() { 
 
    this.watcher.subscribe((data: User) => { 
 
     console.log('Array has being modified --> ' , data); 
 
     alert('Array has received new Data') 
 
     this.objArr.push({name: data.name, age: data.age}) 
 
    }) 
 
    } 
 

 
    ngAfterContentInit() { 
 
    setTimeout(() => { 
 
     this.watcher.next({name: 'Andy', age: 32}) 
 
    }, 3500) 
 

 

 
    setTimeout(() => { 
 
     this.watcher.next({name: 'Bob', age: 48}) 
 
    }, 6000) 
 
    } 
 

 
    addObj(data: User) { 
 
    this.watcher.next(data) 
 
    } 
 
} 
 

 
export interface User { 
 
    name: string, 
 
    age: number 
 
}

你可以去這裏進一步閱讀和文檔http://reactivex.io/rxjs/
但底線是，你需要一個可觀察的/ etc觀看有關流的文件變化，訂閱它收到通知/等。這也是使用EventEmitter在組件之間進行通信的更好方法。 Angular加載了可以訂閱的Observable，例如HttpClient。

祝你好運。