当页面上没有显示所需数据，但在控制台中显示时，可能有几个原因导致此问题。以下是一些可能的解决方法：

1. 确保数据已正确加载：检查网络请求是否成功，并确保从后端获取到了正确的数据。可以使用浏览器开发者工具中的网络选项卡来检查网络请求的状态和响应数据。

2. 检查数据绑定：确保在模板中正确地绑定了数据。例如，使用插值表达式或属性绑定将组件中的数据绑定到HTML模板中的相应位置。

3. 确保数据已经被赋值：在组件中检查数据是否已经被正确地赋值。可以在组件的构造函数中初始化数据，或者通过订阅Observable来获取异步数据。

4. 检查数据的可见性：确保数据被正确地传递给了要显示数据的HTML元素。例如，检查ngFor指令是否应用在正确的元素上，并且使用正确的数据集。

5. 检查数据的可用性：确保数据在页面渲染时已经可用。在Angular中，可以使用*ngIf指令或导航守卫来确保数据在页面加载之前已经准备好。

以下是一个示例代码，展示了如何使用ngIf来确保数据在页面渲染之前已经准备好：

在组件的HTML模板中：

在组件的控制器中：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe((response) => {
      this.data = response;
    });
  }
}

在上面的示例中，只有当data变量有值时，才会显示包含数据的HTML元素。这样可以确保数据在页面渲染之前已经准备好。

希望这些解决方法能帮助到你解决问题！