尝试使用伪造的 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>

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

请在下面找到（获取）请求代码。另外我使用的是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>

基本上这意味着遍历所有 posts 并为每个 post

创建一个 card

Answer 2

您只需在 card div 中使用 *ngFor 来遍历所有 post 并打印 url 和每个 [= 的标题20=].

下面添加了工作演示。

Demo

Answer 3

你只是忘了用 *ngFor

迭代它

 <h2>Amazing Places on Earth</h2>
    <div class="card" *ngFor="let post of posts">
        <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>

Answer 4

你忘了用 *ngFor 循环遍历 JSON 数据加上使用 angular 输入绑定来分配图像的 src 字段 [src] 所以你编辑的代码看起来像：

<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>

尝试使用伪造的 JSON 数据，但无法在 HTML 页面中更新

Trying to use fake JSON data, but not able to update in HTML page

rest

node.js

angular-services

angular