在foreach中访问注入服务-angular2

Question

I have a component which has a service Injected into it's constructor and I have a map function on array of objects. When I tried access my model inside map function it's returning undefined error.

Code:

export class StrategyComponent implements ComponentDefinition{
type = "component";
strategies : any[];

constructor(@Inject(GateDataModel) private gateDataModel){
   //Updatedcode
   EmitterService.get("event_name")
        .subscribe(obj => {
            this.buildStrategies(obj.strategies);
        })
}


buildStrategies(_strategies){
    this.strategies = _strategies;
}

selectStrategy(i){ //Function called on click from template
    this.gateDataModel.strategyId = this.strategies[i].id;
    this.strategies.map(function(_strategy, index){
        this.gateDataModel.strategyId = _strategy.id; //Error Here
        i === index ? _strategy.isSelected = true : _strategy.isSelected = false;
    })
}


}

How can I access my model inside map function?

Thanks

Answer 1

As I mentioned in the comment, I'm pretty sure the problem is calling ' this .gateDataModel.strategyId' inside the call back. this cannot be resolved in that scope. You have two options:

1. Trap this outside like so:

selectStrategy(i){ //Function called on click from template
    this.gateDataModel.strategyId = this.strategies[i].id;
    var _this = this;
    this.strategies.map(function(_strategy, index){
        _this.gateDataModel.strategyId = _strategy.id; //Error Here
        i === index ? _strategy.isSelected = true : _strategy.isSelected = false;
    })
}

2. You can use a function pointer arrow function expression instead:

selectStrategy(i){ //Function called on click from template
    this.gateDataModel.strategyId = this.strategies[i].id;
    this.strategies.map((_strategy, index) => {
        this.gateDataModel.strategyId = _strategy.id; //Error Here
        i === index ? _strategy.isSelected = true : _strategy.isSelected = false;
    }) // You might need to check my syntax
}