CODEWITHSUNDEEP
angular
Mike3355
Mike3355

Reputation: 12081

Initializing a variable in a model from a angular service

I am trying to get a image path from a restful call. I get a lot of other information that I do not need at the moment but I do need the path so I a loop through the image path on the HTML page. Below is what I have:

    [ {
  "level" : {
    "id" : 1,
    "description" : "SFG Level 0",
    "imageName" : "guru-level-0.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.687+0000",
    "updated" : "2017-08-14T11:14:43.687+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-0.png"
}, {
  "level" : {
    "id" : 2,
    "description" : "SFG Level 1",
    "imageName" : "guru-level-1.png",
    "levelNumber" : 1,
    "created" : "2017-08-14T11:14:43.689+0000",
    "updated" : "2017-08-14T11:14:43.689+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-1.png"
}, {
  "level" : {
    "id" : 3,
    "description" : "SFG Level 2",
    "imageName" : "guru-level-2.png",
    "levelNumber" : 2,
    "created" : "2017-08-14T11:14:43.690+0000",
    "updated" : "2017-08-14T11:14:43.690+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-2.png"
}, {
  "level" : {
    "id" : 4,
    "description" : "SFG Level 3",
    "imageName" : "guru-level-3.png",
    "levelNumber" : 3,
    "created" : "2017-08-14T11:14:43.692+0000",
    "updated" : "2017-08-14T11:14:43.692+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-3.png"
}, {
  "level" : {
    "id" : 5,
    "description" : "SFG Level 4",
    "imageName" : "guru-level-4.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.693+0000",
    "updated" : "2017-08-14T11:14:43.693+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-4.png"
}, {
  "level" : {
    "id" : 6,
    "description" : "SFG Level 5",
    "imageName" : "guru-level-5.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.694+0000",
    "updated" : "2017-08-14T11:14:43.694+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-5.png"
} ]

My model look like:

export interface LevelModel {
    level: {
        id: number,
        description: string,
        imageName: string,
        levelNumber: number,
        created: Date,
        updated: Date
    },
    levelImagePath: string
}

Service:

@Injectable()
export class LevelsProxy {

    constructor(private httpUtil: HttpUtil, private appConstants: AppConstants) { }

    getLevels(): Observable<LevelModel[]> {
        return this.httpUtil.get(this.appConstants.END_POINT_LEVELS)
            .map(response => <LevelModel[]>response.json());
    }

}

Now for the component:

@Component({
    selector: 'sfg-levels',
    templateUrl: './levels.component.html'
})
export class LevelsComponent implements OnInit {

    private levels: LevelModel[] = [];

    constructor(private levelsService: LevelsProxy) { }

    ngOnInit() {

        this.levelsService
            .getLevels()
            .subscribe((data: LevelModel[]) => {
                if(data){
                    this.levels = this.levelsService.getLevels();
                }
            });
    }
}

component

in HTML:

<picture>
    <img class="shield-holder" [src]="level?.levelImagePath" alt="image description">
</picture>

Error:

/levels/levels.component.ts (23,21): Type 'Observable' is not assignable to type 'LevelModel[]'. Property 'length' is missing in type 'Observable'.

After a solution provided I have the following issue:

enter image description here

Upvotes: 0

Views: 95

Answers (2)

Martin
Martin

Reputation: 16292

In your example change this line:

 this.levels = this.levelsService.getLevels();

to:

this.levels = data;

TypeScript found this error for you.

Upvotes: 0

micronyks
micronyks

Reputation: 55443

ngOnInit() {
        this.levelsService
        .getLevels(
        .subscribe((data: LevelModel[]) => {
            if(data){  
               this.levels=data.map( val => return val.levelImagePath);
               console.log(this.levels);
            }
        });
}

<picture *ngFor="let level of levels">
    <img class="shield-holder" [src]="level" alt="image description">
</picture>

DEMO : https://plnkr.co/edit/Jf3HVZ8qg8pwzx01c13r?p=preview

(pls ignore Angular version and click on friends link to see the result. please find relevant code in myfriends.ts file.

Upvotes: 1

Related Questions