ブール値に基づいて配列にオブジェクトを追加/削除する - 角度2 + /イオン2+

Question

私はアイテムのリストを持っています。もともと私はプルダウンしています。どのオブジェクトの配列です。私は次に、この新しいエンドポイントから何かがこのアレイに変更されたかどうかを確認する要求を出します。オブジェクトがこの配列に追加されている場合、追加されたオブジェクトでこの配列を何とか表示する必要があります。新しいオブジェクトを古い配列に挿入する。私はこれについてどうやって行くのですか？ありがとう！

Answer 1

このアプローチは、Angular単独またはIonic Frameworkのいずれかです。
Observables、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/
のためにここに行くことができますが、一番下の行は、あなたが、ストリーム上のファイルの変更を監視し、それを購読する/観測などを必要とするということです通知等を受ける。これは、EventEmitterを使用する代わりに、コンポーネント間で通信するためのより良いアプローチです。 Angularには、HttpClientなどの購読可能なObservableがロードされます。

幸運のベスト。