Question

我在我的角度2应用程序中面临一个问题，即我在服务中保存的数据未在组件中检索，然后是视图（不确定哪个是问题）。我正在使用一个observable并订阅它。以下是我的文件。

Recipe.service.ts：

  @Injectable()
  export class RecipeService {
  constructor(private http: Http){}

  recipes : Array<Recipes> = new Array(20);

  getRecipes(): Observable<Recipes[]>{

    return this.http.get('my api here')
      .map(this.extractData.bind(this))
  }

  private extractData(res: Response) {
    let body = res.json();

    let total_no_of_recipes = body.pagination.count;
    let no_of_recipes;

    for(no_of_recipes = 0; no_of_recipes < total_no_of_recipes; no_of_recipes++) {
      this.recipes[no_of_recipes] = body.data[no_of_recipes].embed_url;
    }
    console.log(this.recipes); ---> Data is printed in console with no problem here
    return this.recipes;
  }

}

app.component.ts：

export class AppComponent implements OnInit{
  observableRecipes: Observable<Recipes[]>;
  recipes: Recipes[];

  constructor(private recipeservice: RecipeService){}

  ngOnInit(){}

  onSubmit(){
    this.observableRecipes = this.recipeservice.getRecipes();
    this.observableRecipes.subscribe(
      recipes => { this.recipes = recipes }
    );
  }
}

app.component.html：

<span>
    <a *ngFor="let recipe of recipes"> 
        {{ recipe.image }}    ---> error is from these two lines where I am accessing the value
        <iframe src="{{ recipe.image }}" style="width: 280px; height: 170px;"></iframe>
    </a>
</span>

Recipe.model.ts：

export class Recipes{
  public iamge: string;

  constructor(image: string){
    this.image = image;
  }
}

请帮助，因为我无法理解它为什么没有收到数据。

错误：角度2中的资源URL上下文中使用的不安全值

0 个答案: