时间戳

首页 > 解决方案 > Angular 2 - 无法以表格列格式显示数据行

javascript - Angular 2 - 无法以表格列格式显示数据行

问题描述

我是 Angular 的新手。我正在尝试以表格列格式显示数据行。但是一行中的每个字段都显示为一行。我希望一行中的每个字段彼此相邻显示为单行中的不同列。下面是我的 HTML 代码：

<div class='container'>
  <h2 class="page-header">Add Contact</h2>
  <form (submit)="addContact()">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
    </div>
    <input type="submit" class="btn btn btn-success" value="Add">
  </form>
</div>

<hr>

<div class="container">
  <div *ngFor="let contact of contacts">
    <div class="col-md-3">
      {{contact.first_name}}
    </div>
    <div class="col-md-3">
      {{contact.last_name}}
    </div>
    <div class="col-md-3">
      {{contact.phone}}
    </div>
    <div class="col-md-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
  </div>
</div>

这是当前显示数据的方式

标签： javascripthtmlangulartwitter-bootstrap

解决方案

这看起来像一个引导问题。尝试将您的 col-md-3 div 连续包装。

<div class="row">
   <div class="col-md-3">
      {{contact.first_name}}
    </div>
    <div class="col-md-3">
      {{contact.last_name}}
    </div>
    <div class="col-md-3">
      {{contact.phone}}
    </div>
    <div class="col-md-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
</div>

在这个 codepen 中，您可以将其可视化：https ://codepen.io/capozzic1/pen/rrYzaV

推荐阅读