Question

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

Answer 1

<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 4中的项目

1 个答案: