Как использовать http получить метод в угловых 2 и показать элементы в списке? - PullRequest
Новая
       48

Как использовать http получить метод в угловых 2 и показать элементы в списке?

0 голосов
/ 26 июня 2018

Я пытаюсь использовать httpclient get метод в угловых 2 и показывать элементы в списке, но я использую ngrx с ngrxeffect (для асинхронной задачи).Я делаю редуктор, действие. Я также делаю effect файл. Теперь я хочу вызвать сервис и извлечь данные из сервиса и сохранить данные в хранилище.

Я пробовал вот так

https://stackblitz.com/edit/angular-s5xdfv?file=src%2Fapp%2Fstore%2Flist.effect.ts

редуктор

импорт * как действие из './list.action';

export interface Bank {
  seo_val:string;
  text_val:string;
}

export interface State {
  isLoading: boolean;
  isLoadSuccess: boolean;
  banks: Array<Bank>;
}

export const initialState: State = {
  isLoading: false,
  isLoadSuccess: false,
  banks: []
};

export function reducer(state = initialState, action: Action.Actions): State {
  switch (action.type) {
    case Action.GET_BANKLIST: {
      return {
        ...state,
        isLoading: true,
        isLoadSuccess: false,
        banks: []
      };
    }

    case Action.GET_BANKLIST_SUCCESS: {
      return {
        ...state,
        isLoading: false,
        isLoadSuccess: true,
        banks: action.payload.data
      };
    }

    case Action.GET_BANKLIST_FAILED: {
      return {
        ...state,
        isLoading: false,
        isLoadSuccess: false,
        banks: []
      };
    }

    default: {
      return state;
    }
  }
}

эффект 

import {Actions, Effect} from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import {Injectable} from '@angular/core';
import {SwitchMap } from 'rxjs/operator ';

import * as BankListAction from './list.action';



@Injectable()
export class ListEffects {

  @Effect()
  authSingup = this.actions$
    .ofType(BankListAction.GET_BANKLIST).
     SwitchMap(()=>{
      return this.http.get('http://biz.timesofindia.indiatimes.com/bankifsc/getlist')
     })

constructor(private actions$: Actions,
private http:HttpClient) {
  }

}

любое обновление

...