javascript - 如何在 md-list-item *ngFor 中插入换行符？

Question

我正在制作一个包含数组迭代的 md-list。我的代码:

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.gt-md="space-around center"
  fxLayoutGap="10px" fxLayoutGap.xs="0">

  <div fxFlex="40">
    <md-card>
      <md-card-header>
        <md-card-title>
          <h3>{{ dish.name | uppercase }}</h3>
        </md-card-title>
      </md-card-header>
      <img md-card-image src="{{dish.image}}" alt="{{dish.name}}">
      <md-card-content>
        <p>
          {{dish.description}}
        </p>
      </md-card-content>
      <md-card-actions>
        <button md-button>LIKE</button>
        <button md-button>SHARE</button>
      </md-card-actions>
    </md-card>
  </div>

  <div fxFlex="40" *ngIf="dish">
    <md-list>
      <md-list-item>
        <h3>Comments</h3>
      </md-list-item>
      <md-list-item *ngFor="let item of dish.comments">
        <p>{{item.comment}}</p>
        <p>{{item.rating + " Stars"}}</p>
        <p>{{item.author}} {{item.date}}</p>
      </md-list-item>
    </md-list>
  </div>

</div>

我的期望:

Expected result

我得到的:

Result got

这是我的数组常量:

Constant

我真的不知道我做错了什么。我已经尝试过，对于每条评论、评分和作者，*ngFor 旁边的 dxLayout="row"，但我一无所获。你能帮帮我吗？

谢谢。

Answer 1

试试这个。您可以使用类 dishComment 设置每个 dish.comments

之间的空间

<md-list-item *ngFor="let item of dish.comments">
    <div class='dishComment'>
        <li>{{item.comment}}</li>
        <li>{{item.rating + " Stars"}}</li>
        <li>{{item.author}} {{item.date}}</li>
    </div>
 </md-list-item>

CSS

.dishComment li{
  list-style-type:none;
}