как получить и отобразить данные хранилища ngrx в угловых, используя ngFor - PullRequest
Новая
       68

как получить и отобразить данные хранилища ngrx в угловых, используя ngFor

0 голосов
/ 11 июня 2019

Я храню данные формы в массиве в состоянии. Я получаю массив, но он находится во вложенной форме. Я не знаю, как его отобразить.

// просмотр Viewcomponent.ts 

customerarray: Customer[];
ngOnInit() {
// this.customerObs = this.store.select('customerList');
this.store.select<Customer[]>('customerList').subscribe(res =>                     
    {
      this.customerarray = res;
      console.log(res);
      console.log(this.customerarray);
    });
}

// viewcomponent.html 

<li *ngFor="let customer of customerarray; i as index">
      <span>{{ i + 1}}.</span>  {{customer.customer.name}}
</li>

// reducer.ts 

import { Customer } from '../app/models/customer';
import { ADD_CUSTOMER } from '../app/store/action';
import * as CustomerAction from '../app/store/action';
const initialState = {
    customer: [
        new Customer('Steve', 'Yellow'),
        new Customer('RDJ', 'Red')
    ]
};

export function CustomerReducer(state = initialState, action: CustomerAction.AddCustomer) {
    console.log(state.customer);
    switch (action.type) {
        case CustomerAction.ADD_CUSTOMER:
            return {`enter code here`

            ...state,                
            customer: [...state.customer, action.payload]
            };

        default:
            return state;
    }
}

Ответы [ 2 ]

0 голосов
/ 16 июня 2019

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

попробуйте это -

.ts файл - 

customersObs:Observable<Customer[]>
constructor() {
 this.customersObs = this.store.select<Customer[]>('customerList');
}

.html файл - 

<li *ngFor="let customer of cusomersObs | async; i as index">
      <span>{{ i + 1}}.</span>  {{customer.name}}
</li>
0 голосов
/ 11 июня 2019

Я предполагаю, что ваш Customer класс определен следующим образом - 

export class Customer {
  name: string;
  color: string;
  constructor(n: string, c: string) {
     this.name = n;
     this.color = c;
  }
}

Я также предполагаю, что ваш селектор this.store.select<Customer[]>('customerList') возвращает свойство customer из вашего initialState.

Если я прав, вы должны обновить свой шаблон следующим образом - 

<li *ngFor="let customer of customerarray; i as index">
      <span>{{ i + 1}}.</span>  {{customer.name}}
</li>
...