Question

我使用angular cli 1.4.3，节点6.11.3，npm 5.4.2，我想用angular2读取记录。 localhost的输出应该是这样的：

但我得到的输出是这样的：

这里是html代码：

<div class="row m-b-18px">
<div class="col-md-12">
    <!-- button to create new product -->
    <a (click)="createProduct()" class='btn btn-primary pull-right'>
        <span class='glyphicon glyphicon-plus'></span> Create Product
    </a>
</div>
</div>

<div class="row">
<div class="col-md-12">

    <!-- HTML table for our list of product records -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Category</th>
            <th>Actions</th>
        </tr>

        <!-- Use *ngFor directive to loop throught our list of products. -->
        <tr *ngFor="let product of products">
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.description}}</td>
            <td>{{product.category_name}}</td>
            <td>
                <!-- read one product button -->
                <a (click)="readOneProduct(product.id)" class='btn btn-
                primary m-r-5px'>
                    <span class='glyphicon glyphicon-eye-open'></span> Read
                </a>

                <!-- edit product button -->
                <a (click)="updateProduct(product.id)" class='btn btn-info 
                m-r-5px'>
                    <span class='glyphicon glyphicon-edit'></span> Edit
                </a>

                <!-- delete product button -->
                <a (click)="deleteProduct(product.id)" class='btn btn-danger 
                m-r-5px'>
                    <span class='glyphicon glyphicon-remove'></span> Delete
                </a>
            </td>
        </tr>
    </table>
</div>
</div>

这里是css代码：

.m-b-18px{ margin-bottom: 18px; }
.m-r-5px{ margin-right: 5px; }
.w-40-pct{ width: 40%; }
.text-align-center{ text-align: center; }

谢谢

Answer 1

您的项目中似乎没有包含Bootstrap。首先，安装它：

npm install --save bootstrap

然后转到angular-cli.json文件，找到样式属性并添加"../node_modules/bootstrap/dist/css/bootstrap.min.css"，使其如下所示：

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Answer 2

您是否在组件中使用View encapsulation？

Angular CLI不会显示CSS

2 个答案: