node.js - 尝试使用假 JSON 数据，但无法在 HTML 页面中更新

Question

数据已显示，但不知道为什么无法按照语法和代码获取图像。

<h2>Amazing Places on Earth</h2>


<div class="card">
    <div class=" card-block">
        <img src="{{post.url}}" class="img-fluid ${3|rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,|}" style="width :300px" alt="paris">
        <div class="card-titile">
            {{post.title}}
        </div>
        <div class="card-text">
            <p>Get details Click find more</p>
        </div>
        <a href="#" class=" btn btn-success"> Find More</a>
    </div>
</div>

这是迄今为止我在组件中使用的使用 bootstrap 4 代码的 HTML。

请在下面找到(获取)请求代码。此外，我正在使用 Angular 的最新版本

@Component({
  selector: 'app-places',
  templateUrl: './places.component.html',
  styleUrls: ['./places.component.css']
})
export class PlacesComponent implements OnInit {    
  constructor(private data: PhotodataService) { }
  posts: object;
  ngOnInit() {
    this.data.getdata().subscribe(data => {
      this.posts = data;
      console.log(this.posts);
    });
  }    
}

Answer 1

您缺少*ngFor来自您的组件

<!-- notice the *ngFor below -->
<div *ngFor="let post of posts" class="card">
    <div class=" card-block">
        <img src="{{post.url}}" class="img-fluid ${3|rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,|}" style="width :300px" alt="paris">
        <div class="card-titile">
            {{post.title}}
        </div>
        <div class="card-text">
            <p>Get details Click find more</p>
        </div>
        <a href="#" class=" btn btn-success"> Find More</a>
    </div>
</div>

基本上这意味着循环所有帖子并为每个帖子创建一个卡片