Ionic中API数据控制台可见但HTML组件不显示的解决方法

嘿，我看到你的问题了——控制台能正常打印书籍数据，但HTML组件就是渲染不出来对吧？问题其实出在你book-list.page.ts的赋值逻辑上，咱们来一步步搞定它：

问题根源 #

你在getBook()方法的subscribe回调里写了books = books;，这只是把API返回的数据赋值给了回调函数内部的局部变量books，并没有更新组件类里定义的那个this.books成员变量。Angular的变更检测只会监听类成员变量的变化，所以你的模板完全感知不到数据已经获取到了。

修正后的book-list.page.ts代码 #

import { Component, OnInit } from '@angular/core';
import{Book} from '../book';
import { first } from 'rxjs/operators';
import{UserService} from '../user.service';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.page.html',
  styleUrls: ['./book-list.page.scss'],
})
export class BookListPage implements OnInit {
  books: Book[] = [];
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.getBook()
  }

  getBook(){
    this.userService.getBook().pipe(first()).subscribe(books => {
      // 关键修改：赋值给组件的成员变量this.books
      this.books = books;
      console.log(this.books); // 也可以打印this.books确认数据是否正确存入
    });
  }
}

额外注意点 #

另外检查一下你的HTML文件名：你贴的代码里HTML文件叫blog-list.page.html，但组件对应的应该是book-list.page.html，如果文件名不匹配也会导致模板无法正确关联，这点可别忽略哦。

内容的提问来源于stack exchange，提问作者Dinesh Vishwakarma