如何在加载应用程序时呈现状态?当我运行此应用程序时,状态为空,直到我单击带有单击功能的按钮。我尝试执行this.store.select,但我从未获得所请求的状态。 Todo_List是ngrx存储内的一个对象,我想呈现其list属性,该属性是一个数组
App.Component.ts
import { Component,OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './AppState.model';
import { Add_Todo, Load_Todos } from './ngrx.actions';
import { Todo } from './ngrx.model';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private store: Store<AppState>,private http:HttpClient ){
}
todo_list$: Observable<Array<Todo>>
loading$: Observable<Boolean>;
ngOnInit(): void{
console.log(this.store)
this.store.dispatch(new Load_Todos());
console.log(this.store)
this.todo_list$ = this.store.source._value.Todo_List.list
this.loading$ = this.store.source._value.Todo_List.loading
}
title = 'angular-todo-list';
click(){
// console.log(this.store)
// this.store.dispatch(new Add_Todo({
// message: 'heyyyyy',
// time: '3pm',
// date:'05/16/20',
// user_id: 1,
// }));
this.todo_list$ = this.store.source._value.Todo_List.list
}
}
App.Component.ts
<button (click)="click()"id="enter"><i class="fas fa-pencil-alt"></i></button>
<div class="row">
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2">
<li *ngFor="let x of todo_list$">{{x.message}}</li>
</ul>
</div>
</div>
</div>