サーバレスポンスがAngular 2で定義されていない場合、変数を何らかの値に設定します。

Question

Angular 2をRedux（ngrx：reducersおよびeffects）と組み合わせて使用​​しています。サーバーへのリクエストがあり、値がない場合は、デフォルト値に設定する必要があります。私は活動とイメージを持っています。アクティビティは、最後のモーションおよび/またはメッセージが発生したときであり、画像は画像へのリンクである。ここで

は影響からのコードです：ここでは

@Effect() getActivity$ = this.actions$ 
     .ofType(DashboardActions.GET_ACTIVITY) 
     .withLatestFrom(this.store, (action, state) => ({ 
     senior: state.senior.globalSenior.id, 
     date: action.payload 
     })) 
     .switchMap((options) => { 
     return this.dashboardService.getActivity({ 
      id: options.senior, 
      date: options.date 
     }) 
     .map((res) => ({ type: DashboardActions.GET_ACTIVITY_SUCCESS, payload: res })) 
     .catch(() => Observable.of({ type: DashboardActions.GET_ACTIVITY_ERROR })) 
     }) 

    @Effect() getImages$ = this.actions$ 
     .ofType(DashboardActions.GET_IMAGES) 
     .withLatestFrom(this.store, (action, state) => ({ 
     senior: state.senior.globalSenior.id, 
     date: action.payload 
     })) 
     .switchMap((options) => { 
     return this.dashboardService.getImages({ 
      id: options.senior, 
      date: options.date 
     }) 
      .map((res) => ({ type: DashboardActions.GET_IMAGES_SUCCESS, payload: res })) 
      .catch(() => Observable.of({ type: DashboardActions.GET_IMAGES_ERROR })) 
     }) 

は減速からのコードです：私はHTMLで（コンポーネント）のテンプレートを、それを使用しているのはここ

export interface State { 
     activity: any, 
     images: any 
    } 

    const initialState: State = { 
     activity: null, 
     images: null 
    } 

    export function reducer (state = initialState, action: Action): State { 
     switch (action.type) { 
     case DashboardActions.GET_ACTIVITY_SUCCESS: 
      return Object.assign({}, state, { 
      activity: action.payload 
      }) 

     case DashboardActions.GET_IMAGES_SUCCESS: 
      return Object.assign({}, state, { 
      images: action.payload 
      }) 

     default: 
      return state 
     } 
    } 

は次のとおりです。

 <ion-grid class="dashboard-table"> 
      <ion-row> 
       <ion-col *ngFor="let message of (activity$ | async)?.data[0]" text-center no-padding> 
       <span [ngClass]="{'dot-message dot-message--big':(message === 1)}" *ngIf="message"></span> 
       <span [ngClass]="{'dot-message':(message !== 1)}" *ngIf="!message"></span> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col *ngFor="let motion of (activity$ | async)?.data[1]" text-center no-padding> 
       <span [ngClass]="{'dot-motion dot-motion--big':(motion === 1)}" *ngIf="motion"></span> 
       <span [ngClass]="{'dot-motion':(motion !== 1)}" *ngIf="!motion"></span> 
       </ion-col> 
       <ion-col col-6 *ngFor="let image of (images$ | async)" no-padding class="images__col"> 
       <img (click)="onLittleImageClick(image.data)" [src]="image?.data" /> 
       <span class="images__time">{{ (activity$ | async)?.last_motion_time | date:'h:mm:a' }}</span> 
       </ion-col> 
      </ion-row> 
     </ion-grid> 

    constructor (
     public navCtrl: NavController, 
     public modalCtrl: ModalController, 
     private store: Store<fromRoot.AppState> 
    ) { 
     this.activity$ = this.store.select(s => s.dashboard.activity) 
     this.images$ = this.store.select(s => s.dashboard.images) 
     this.hideSwipeUpButton() 
    } 

これは、データがある場合にサーバーが返すものです。

activity { 
     "data":[[1,1,0,1,0,1,0,1,0,0,1,0],[0,0,0,1,1,0,1,0,1,1,1,0]], 
     "types":["Message","Motion"], 
     "graph_start":0, 
     "graph_end":1320, 
     "graph_step":120, 
     "last_message_time":"2017-07-11T20:17:02.118Z", 
     "last_motion_time":"2017-07-11T21:24:02.118Z" 
    } 
    images { 
     data: "https://us.123rf.com/450wm/budabar/budabar1511/budabar151100162/48605730-old-man-sitting-on-bed-and-holding-head-with-hands.jpg?ver=6" 
     id: "30230de6-471e-4866-aa6d-ff3e6dd1eee0" 
    } 

実際には、データを取得する日付のサーバーoptions.dateに進んでいます。そして、データサーバが未定義の場合、私はそれを読み取ることができず、アプリケーションがクラッシュします。そのような状況では、私はいくつかのデフォルト値を設定する必要があります。

Answer 1

私はこの問題を解決することができました。まず、減算器にデフォルト値を定義し、戻り値にObject.assign（）を設定しました。したがって、私の減速機では、サーバーから返された空の配列がある場合、減算器はデフォルト値を返します。だから最終的に私の減速機はこのようになります：

 const defaultActivityValues = { 
     data:[[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0]], 
     types:["Message","Motion"], 
     graph_start:0, 
     graph_end:0, 
     graph_step:0, 
     last_message_time:"2017-01-01T20:17:02.118Z", 
     last_motion_time:"2017-01-01T21:24:02.118Z" 
    } 
    export interface State { 
     activity: any, 
     images: any 
    } 

    const initialState: State = { 
     activity: null, 
     images: null 
    } 

    export function reducer (state = initialState, action: Action): State { 
     switch (action.type) { 
     case DashboardActions.GET_ACTIVITY_SUCCESS: 
      return Object.assign({}, state, { 
      activity: Object.assign({}, defaultActivityValues, action.payload) 
     }) 
     case DashboardActions.GET_IMAGES_SUCCESS: 
      return Object.assign({}, state, { 
      images: action.payload 
     }) 
     default: 
      return state 
     } 
    }