Angular: service and ngrx return undefined

Question

我正在学习Angular, DI, Services和Ngrx，我有一个问题，我无法理解

当我记录this. getbase()和this。我得到的值在我的控制台，但当我试图注入它在我的字符串插值我得到未定义。

我没有尝试过getbase()方法，所以使用了this。baseratessaving，但我的编辑器告诉我'属性' baseratessaving '在初始化之前使用'

下面是代码:

import { BodyCard, HeaderCard, IconDetails } from '@fortuneo/components/src/app/components/card/card.model';
import { CardsOptionsContextService } from './cards-options-context.service';
import { Injectable, OnDestroy } from '@angular/core';
import { combineLatest } from 'rxjs';
import { subscriptionSelector } from '../../../store/subscription/subscription.state';
import { savingsParametersSelector } from '../../../store/parameters/parameters.state';
import { Subscription as RXSubscription } from 'rxjs/internal/Subscription';
import { Store } from '@ngrx/store';
import { AppState } from '../../../store/store.model';
import { Product } from '@fortuneo-models/subscription';
export interface CardOptions {
id: string;
iconDetails: IconDetails;
headerCard: HeaderCard;
bodyCard: BodyCard;
context?: {}
}
@Injectable()
export class CardsOptionsService implements OnDestroy {
products: Product[];
baseRateSaving: number;
private data$: RXSubscription;
constructor(private cardsOptionsContext: CardsOptionsContextService,
private store: Store<AppState>) {
this.data$ = combineLatest([
this.store.select(subscriptionSelector),
this.store.select(savingsParametersSelector)
]).subscribe(([subscription, savingsParameters]) => {
this.products = subscription.products;
this.baseRateSaving = savingsParameters.baseRate;
});
console.log(this.baseRateSaving);
console.log(this.getBase());
}
getBase() {
return this.baseRateSaving;
}
}
...
...
headerCard: {
title: '<h2 class="title">Livret +</h2>',
subTitle: `<p class='subtitle'>Taux de base : ${this.getBase()}% bruts(2)</p>`
},

我真的迷路了

Answer 1

自从我用angular编程以来已经很长时间了，我可能是错的，但是你可以尝试用ngOnInit而不是构造函数来做吗?你应该看看angular的生命周期。

ngOnInit() {
this.logIt(`OnInit`);
}

Answer 2

由于这是一个@Injectable()类，您不能直接放置getBase()。

将headerCard变量放在您创建的组件中，然后从那里您需要在构造函数中注入CardsOptionsService并调用getBase()。

@Injectable()
export class CardsOptionsService {
products: Product[];
baseRateSaving: number;
private data$: RXSubscription;
constructor(private cardsOptionsContext: CardsOptionsContextService,
private store: Store<AppState>) {
this.data$ = combineLatest([
this.store.select(subscriptionSelector),
this.store.select(savingsParametersSelector)
]).subscribe(([subscription, savingsParameters]) => {
this.products = subscription.products;
this.baseRateSaving = savingsParameters.baseRate;
});
console.log(this.baseRateSaving);
console.log(this.getBase());
}
getBase() {
return this.baseRateSaving;
}
}

你需要注入到你的组件中的服务(不要在你的服务中使用组件生命周期钩子(OnInit, OnDestroy))

@Component({ selector: 'header' })
class HeaderComponent implements OnInit () {
headerCard: {
title: '<h2 class="title">Livret +</h2>',
subTitle: `<p class='subtitle'>Taux de base : ${this.base}% bruts(2)</p>`
},
constructor(private cardsOptionsService: CardsOptionsService) {}
get base() {
return this.cardsOptionsService.getBase();
}
}

要将字符串转换为html，您需要DomSanitizer。

https://stackblitz.com/edit/angular-safehtml