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

嘿，我看你正在用Angular Material构建布局，同时想要通过数组迭代生成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>
        <!-- 这里是卡片内容区域 -->
      </md-card-content>
    </md-card>
  </div>
</div>

要实现数组迭代生成md-list，你可以利用Angular的*ngFor指令结合Angular Material的md-list、md-list-item组件来完成。假设你有一个名为dishes的数组数据源，下面给你补全完整的示例：

<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>
        <!-- 卡片详情内容 -->
      </md-card-content>
    </md-card>
  </div>

  <!-- 右侧迭代生成的md-list区 -->
  <div fxFlex="50">
    <md-list>
      <!-- 用*ngFor遍历dishes数组生成每一项 -->
      <md-list-item *ngFor="let item of dishes; let i = index">
        <md-icon md-list-icon>restaurant_menu</md-icon>
        <h4 md-line>{{ item.name | uppercase }}</h4>
        <p md-line> {{ item.description }} </p>
        <button md-button (click)="selectDish(item)">查看详情</button>
      </md-list-item>
    </md-list>
  </div>
</div>

另外给你提几个小注意点：

• 要确保已经在你的模块中导入了Angular Material的MdListModule和MdIconModule，不然组件会无法识别
• *ngFor里的let i = index是可选的，如果你需要用到列表项的序号可以加上
• 可以根据需求调整fxLayout相关属性，让布局适配不同屏幕尺寸
• 组件类里要记得定义dishes数组和对应的dish对象（比如选中的菜品）

内容的提问来源于stack exchange，提问作者kvothe838