import { Component, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable, Subscription } from 'rxjs';
import { Ingredient } from '../shared/ingredient.model';
import { ShoppingListService } from './shopping-list.service';
@Component({
selector: 'app-shopping-list',
templateUrl: './shopping-list.component.html',
styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit, OnDestroy {
ingredients: Observable<{ ingredients: Ingredient[] }>;
private subscription: Subscription;
constructor(
private slService: ShoppingListService,
private store: Store<{ shoppingList: { ingredients: Ingredient[] } }>
) {}
ngOnInit() {
this.ingredients = this.store.select('shoppingList');
}
onEditItem(index: number) {
this.slService.startedEditing.next(index);
}
ngOnDestroy() {
// this.subscription.unsubscribe();
}
}
<div class="row">
<div class="col-xs-10">
<app-shopping-edit></app-shopping-edit>
<hr>
<ul class="list-group">
<a
class="list-group-item"
style="cursor: pointer"
*ngFor="let ingredient of (ingredients | async).ingredients; let i = index"
(click)="onEditItem(i)"
>
{{ ingredient.name }} ({{ ingredient.amount }})
</a>
</ul>
</div>
</div>
{
"name": "ng-complete-guide-update",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@ngrx/store": "^8.0.0-beta.2",
"bootstrap": "3.3.7",
"core-js": "^3.1.2",
"firebase": "^7.12.0",
"rxjs": "^6.0.0",
"tslib": "^1.9.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.25",
"@angular/cli": "^8.0.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "3.4.5"
}
}
Асин c в html завершается ошибкой: ингредиенты не определены. Если я пытаюсь подписаться в ngOninit, установить для ингредиентов свойство в class.it по-прежнему не удается с неопределенным в подписке.
Я обновил все зависимости. Однако автор учебника не получает эту проблему когда я пытаюсь, ему не удается получить данные набора из редукторов в пользовательский интерфейс, хотя я могу видеть значения в режиме отладки.
Когда я искал ответ, все, что я получал, это проблема с зоной. Поскольку я новичок в это не уверен, как решить.