我試圖在頁面上顯示我的應用程式的初始狀態。但是當我對狀態資料執行 for 回圈時，出現錯誤Object is possibly 'null'.
向前幾步：*ngFor現在的樣子*ngFor="let workout of (workouts | async).workouts"。當我洗掉.workouts錯誤時Type '{ workouts: Workout[]; } | null' is not assignable to type 'NgIterable<any> | null | undefined'
所以我假設我的應用程式由于某種原因無法獲取初始狀態。我檢查了模型，所有型別的資料都是正確的。我也為此在 Google 上搜索過：“物件”型別不可分配給“NgIterable<any>” | 空| 未定義' 但似乎我做的一切都是正確的。
現在代碼：
鍛煉模型.ts
import { Exercise } from "./exercise.model"
export interface Workout {
name: string,
exercises: Exercise[]
}
運動模型.ts
export interface Exercise {
name: string,
completed: boolean
}
動作.ts
import { Action } from "@ngrx/store"
import { Workout } from "../models/workout.model"
export const ADD_WORKOUT = 'ADD_WORKOUT'
export const REMOVE_WORKOUT = 'REMOVE_WORKOUT'
export const UPDATE_WORKOUT = 'UPDATE_WORKOUT'
export class AddWorkout implements Action {
readonly type = ADD_WORKOUT
constructor(public payload: Workout) {}
}
export type Actions = AddWorkout
減速機.ts
import * as WorkoutActions from "../actions/tasks.actions"
const initialState = {
workouts: [{
name: "Day 1",
exercises: [{
name: "push-up",
completed: false
}]
}]
}
export function workoutsReducer(state = initialState, action: WorkoutActions.Actions) {
switch(action.type) {
case WorkoutActions.ADD_WORKOUT:
return {
...state,
workouts: [...state.workouts, action.payload]
};
default:
return state;
}
}
app.module.ts
imports: [
BrowserModule,
StoreModule.forRoot({
workoutsList: workoutsReducer
} as ActionReducerMap<any,any>)
],
鍛煉串列.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Workout } from '../models/workout.model';
@Component({
selector: 'app-workouts-list',
templateUrl: './workouts-list.component.html',
styleUrls: ['./workouts-list.component.scss']
})
export class WorkoutsListComponent implements OnInit {
workouts!: Observable<{workouts: Workout[]}>;
constructor(
private store: Store<{workoutsList: {workouts: Workout[]}}>
) { }
ngOnInit(): void {
this.workouts = this.store.select('workoutsList')
}
}
鍛煉串列.component.html
<div *ngFor="let workout of (workouts | async).workouts">
<div>{{workout.name}}</div>
</div>
uj5u.com熱心網友回復：
我Object is possibly 'null'.通過使用可選的鏈接運算子避免了錯誤。
在 for 回圈中鍛煉后嘗試使用它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392329.html