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

Question

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

Answer 1

这看起来像是一个引导问题。尝试将您的 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

Answer 2

从 col-md-3 更改为 col-xs-3 或 col-sm-3。我猜你的视口比 md 大，所以它回落到全宽。

尝试运行下面的sn-p

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
  </div>
</div>

Answer 3

我建议，根据您的要求使用Angular Flex 安排您的<div>s。一旦你知道如何使用 Angular Flex(refer)，它就非常简单了。