Как добавить элемент в наблюдаемый массив rxjs?

Question

У меня есть компонент, который получает данные с сервера. Мой сервис имеет BehaviorSubject<any[]>([]) для получения данных.

export class AppComponent {
  items: Observable<any[]>;

  constructor(private service: MyService) {
    this.items = service.getItems();
    // this items format is like: `[{id:1,name:'cat'},{id:2,name:'dog'}]`
  }

  addItem(item:any){
   // add item to `this.items` observable array ???
  }

  removeItem(item:any){
   // remove item from `this.items` observable array ???
  }
}

И мой сервис выглядит следующим образом:

@Injectable()
export class MyService{
    private items = new BehaviorSubject<any[]>([]);

    constructor(private http: HttpClient) {
      this.loadItems();
    }

    private loadItems() {
      this.http.get<any[]>('/api/items')
        .subscribe((i) => this.items.next(i));
    }

    getItems() {
      return this.items.asObservable();
    }

    addItem(item: any) {
      return this.http
        .post<any>('/api/items', item)
        .subscribe(() => this.loadItems());
    }
}

Мне нужно добавить и удалить элемент в этот наблюдаемый массив, ноне мог сделать это. Служба может добавлять данные на сервер, но мне нужно добавить массив без отправки на сервер. Возможно ли это?

Answer 1

В вашем случае вам не нужно определять BehaviourSubject, потому что вы не поддерживаете состояние приложения. Таким образом, вы можете просто использовать следующее:

В вашем сервисном компоненте пишите только сервис. Поскольку сервис - это одноэлементный объект, который инициализируется только один раз.

@Injectable()
export class SomeDataService {    

    //Made this as observable, But when you use httpClient, No need to use Observable.of(), you can directly return like this.http.get<any[]>('/api/items')

    myData=Observable.of([{id:1,name:'cat'},{id:2,name:'dog'},{id:3,name:'rabbit'}])
    constructor() {     
    }

    loadItems() {
      // in your case, return this.http.get<any[]>('/api/items')
      return this.myData;
    }
}

В AppComponent

export class AppComponent implements OnInit {
    counter=4;
    mydata=[]; //No point to make this as Observable array

    constructor(private _service: SomeDataService) { }

    public ngOnInit(): void {
        this._service.loadItems().subscribe(res=>{     
            this.mydata=res;       
        })  
    }

    addData(){
        let increment=this.counter++
        let data={id:increment,name:increment+"data"}
        this.mydata.push(data)
    }

    removeData(item){
        let index=this.mydata.indexOf(item)
        this.mydata = this.mydata.filter((val,i) => i!=index); 
    }
}

В html,

<button (click)="addData()">Add data</button>

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr *ngFor="let data of mydata;let i=index;">
        <td>{{data.id}}</td>
        <td>{{data.name}}</td>
        <td><button (click)="removeData(data)">Remove data</button></td>
    </tr>
</table>

Нажмите здесь для демонстрации Stackblitz Надеюсь, это может помочь вам

Answer 2

Вам нужно будет подписаться на наблюдаемые и вернуть значения, прежде чем вы сможете делать какие-либо дальнейшие манипуляции.

Например,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit {
  items: any[];

  constructor(private service: MyService) {

  }

  ngOnInit() {
    this.service.getItems().subscribe(res => {
      console.log(res);
      this.items = res;
    });
  }

addItem(){
  // this.items.push(someObject)
}


}