Question

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

<img data-interchange="[image/small.png, small], [image/medium.png, medium], [image/large.png, large]">

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>

在此代码笔中，您可以将其可视化：https://codepen.io/capozzic1/pen/rrYzaV

Answer 2

从col-md-3更改为col-xs-3或col-sm-3。我猜您的视口大于md，因此它会退回到全宽。

尝试运行下面的代码段

<!-- 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>。一旦您知道如何使用Angular Flex（refer），它就非常简单。

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

3 个答案: