我是 Angular 4 的新手，所以如果已经有人问过这个问题，请原谅我。我正在尝试为网上商店创建一个演示项目。任何帮助，将不胜感激 :) 这是我的 item-container.component.html
<div class="container">
<div class="row">
<ul class="list-inline">
<li *ngFor="let item of itemComponents">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src={{item.imagePath}} alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Item {{item.id}}</a>
</h4>
<h5>${{item.price}}</h5>
<p class="card-text">{{item.description}}</p>
</div>
</div>
</div>
</li>
</ul>
这是我的 item-container.component.ts
import { Component, OnInit } from '@angular/core';
import { ItemComponent } from './item.component';
@Component({
selector: 'app-item-container',
templateUrl: './item-container.component.html',
styleUrls: ['./item-container.component.css']
})
export class ItemContainerComponent implements OnInit {
itemComponents: ItemComponent[];
private item: ItemComponent;
constructor() {
this.itemComponents = [
{
id: 1,
name: 'asd',
description: 'asd',
imagePath: 'http://brazildirect.org/assets/galleries/1/beira-mar-700-x-400.jpg',
category: 'something',
price: 2
},
{
id: 2,
name: 'ddd',
description: 'ddd',
imagePath: 'https://static.zerochan.net/Homestuck.full.1314808.jpg',
category: 'something',
price: 25
},
{
id: 3,
name: 'kkk',
description: 'kkk',
imagePath: 'http://www.protekdevices.com/xyz/images/placeholder/700x400.gif',
category: 'something else',
price: 25
}
];
}
ngOnInit() {
}
}
提前谢谢您。 根据评论中的要求从浏览器中获取 HTML 代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="description" content="Demo shop with angular 4">
<meta name="author" content="Levon Asatryan">
<title>Shop Homepage</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-lg-3">
<h1 class="my-4">Shop Name</h1>
<div class="list-group">
<a href="#" class="list-group-item">Turbin</a>
<a href="#" class="list-group-item">File</a>
<a href="#" class="list-group-item">Xuyna</a>
</div>
</div>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script
type="text/javascript" src="polyfills.bundle.js"></script><script
type="text/javascript" src="styles.bundle.js"></script><script
type="text/javascript" src="vendor.bundle.js"></script><script
type="text/javascript" src="main.bundle.js"></script></body>
</html>
最佳答案
<div class="container">
<div class="row">
<div class="list-inline">
<div class="col-lg-4 col-md-6 list-inline-item" *ngFor="let item of itemComponents">
<div >
<div class="card h-100">
<a href="#"><img width="100%" class="card-img-top" src={{item.imagePath}} alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Item {{item.id}}</a>
</h4>
<h5>${{item.price}}</h5>
<p class="card-text">{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
你应该将图像的宽度调节为100%，这样它就不会溢出 我还添加了一些CSS， 这将使所有 3 个 div 排成一行
.list-inline-item:not(:last-child) {
margin-right: 0px;
}
关于angular - 无法水平列出 Angular 4 中的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48397834/