Javascript *用于不显示数据

component.ts文件

posts= [];
  constructor( private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
    .subscribe(response=>{
      this.posts.push(response)
      console.log(this.posts)
    });
  }

在HTML文件中

<ul class="list-group">
  <li 
    *ngFor="let post of posts"
    class="list-group-item">{{post.title}}</li>
</ul>

{post.title}

---

如果我使用控制台，我可以看到阵列中的数据，但出于某种原因，*ngFor只显示一个空白容器。

来自

https://jsonplaceholder.typicode.com/posts

是一个对象数组。但是您正在使用

Array.push（）

向

posts

数组添加项目。因此

posts

数组将只有一个项（即对象数组），而该项将没有

title

属性

尝试这样做：

  posts = [];

  constructor( private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
    .subscribe(response=>{
      this.posts = response
      console.log(this.posts)
    });
  }

---

在这种情况下，也可以使用管道

 posts = this.http.get('https://jsonplaceholder.typicode.com/posts');

 constructor( private http:HttpClient) {}



<ul class="list-group">
  <li *ngFor="let post of posts | async" class="list-group-item"> 
     {{post.title}}
  </li>
</ul>

posts=this.http.get（'https://jsonplaceholder.typicode.com/posts');
构造函数（私有http:HttpClient）{}


{{post.title}


的响应
https://jsonplaceholder.typicode.com/posts
是对象数组

[
  {
   userId: 1,
   id: 1,
   title: "sunt aut facere repellat",
   body: "quia et suscipit suscipit recusandae consequuntur"
  },
 {
   userId: 1,
   id: 2,
   title: "qui est esse",
   body: "est rerum tempore vitae sequi"
 },
]

因此，不必在数组中推送对象数组，只需分配响应即可

创建posts界面，而不是使用
any[]
类型转换

export interface IPosts = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

现在从端点获取数据

posts: IPosts[]; // notice the type instead of any we have proper type.

constructor(private http:HttpClient) { 

const url = 'https://jsonplaceholder.typicode.com/posts';
http.get(url).subscribe((response: IPosts[]) => this.posts = response)}

在模板中，只需迭代结果

<ul class="list-group" *ngIf="posts.length"> <=== for safe side you could use if condition only show if posts are available.
  <li 
    *ngFor="let post of posts"
    class="list-group-item">{{post.title}}</li>
</ul>

您的控制台显示的响应数据是什么？我认为您的代码应该是this.posts=response，而不是this.posts.push（response）；来自URL的响应是一个数组。现在你有了一个数组的数组：
[[[{}，{}，…]]
。您需要将数组分配给变量，而不是推送它：
this.posts=response
。我检查了URL的响应类型，它是一个对象。它不是一个对象，它是一个数组。它给出了一个错误：“object”类型可分配给很少其他类型。你的意思是用“any”类型吗？类型“Object”缺少类型“any[]”中的以下属性：长度、弹出、推送、concat和更多。您可以尝试类型转换：
.subscribe（（响应：any[]）=>{this.posts=response}）
@HarunYilmaz检查我的答案这是使用类型而不是任何等的正确方法。@HarunYilmaz如果你喜欢这种方法，请随意投票支持我的答案：）@KamranKhatti我误读了部分
any[]
：）你是对的。