Redux 如何使用ngFor获取和显示ngrx存储数据

我正在以状态将表单数据存储在数组中。我正在接收数组，但它是嵌套形式。我不知道如何显示它

//查看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);
    });
}

---

我假设您的

Customer

类定义如下-

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

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

我还假设选择器

this.store.select（'customerList'）

从

initialState

返回

customer

属性

如果我是对的，那么你应该像这样更新你的模板-

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

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

{{i+1}}。{{customer.name}

我认为这是一个变化检测问题。 您的组件不在此订阅上渲染

试试这个-

.ts文件-

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

customersObs：可观察
构造函数（）{
this.customersObs=this.store.select（'customerList'）；
}

.html文件-

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

{{i+1}}。{{customer.name}

它返回customer:Array（2）0:customer{name:“Steve”，card:“Yellow”}1:customer{name:“RDJ”，card:“Red”}。当我应用ngfor时，它给出了一个错误，ngfor只支持绑定到Iterables，比如Arrays@Karthi您是否尝试了上面提供的代码更改？注意到与您共享的代码相比，建议的代码更改中的模板更改了吗？它解决了你的问题吗？