Question

我正试图从一个宁静的电话中获取一个图像路径。我得到了很多其他我目前不需要的信息，但我确实需要路径，所以我循环遍历HTML页面上的图像路径。以下是我的内容：

    [ {
  "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"
} ]

我的模特看起来像：

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

服务：

@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());
    }

}

现在为组件：

@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();
                }
            });
    }
}

HTML中的

：

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

错误：

/levels/levels.component.ts(23,21）：输入＆＃39; Observable＆＃39;不能分配给类型＆＃39; LevelModel []＆＃39;。物业长度＆＃39;类型＆＃39; Observable＆＃39;
中缺少

提供解决方案后，我遇到以下问题：

Answer 1

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

（请忽略Angular版本并点击朋友链接查看结果。请在myfriends.ts文件中找到相关代码。

Answer 2

在您的示例中更改此行：

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

为：

this.levels = data;

TypeScript为您找到了此错误。

从角度服务初始化模型中的变量

2 个答案: