Question

我正在制作一个带有数组迭代的md-list。我的代码：

＆＃13;

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

＆＃13;

我的期望：

Expected result

我得到了什么：

Result got

这是我对阵列的常数：

Constant

我真的不知道自己做错了什么。我已经尝试过，对于每个评论，评分和作者，dxLayout =＆＃34; row＆＃34;在* ngFor旁边，但我一无所获。你能救我吗？

感谢。

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;
}

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

1 个答案: