Angular中小型设备上的布局损坏

Question

我在 Angular 应用程序中使用 Angular Material 和 Angular Flex-Layout，但在移动设备上显示文本时遇到问题。正如你在小碎石上看到的那样，那里的标签被剪掉了。如果在移动设备上，我将如何显示它没有被剪切或者我认为另一列应该堆叠在下面？ 检查下面的这张图片以获取当前输出。还有没有一种有效的方法来迭代标签和值而不在 html 中放置许多 div？

HTML

<mat-card-content fxLayout="row" fxLayoutAlign="stretch">
  <mat-grid-list cols="6" rowHeight="28px">
    <mat-grid-tile [colspan]="1" [rowspan]="4">
      <div>
        <div class="details" *ngFor="let label of labels">
          <label><strong>{{ label.name }}</strong></label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <div>
        <div class="details">
          <label>1</label>
        </div>

        <div class="details">
          <label>Robert Williams</label>
        </div>

        <div class="details">
          <label>robert@gmail.com</label>
        </div>

        <div class="details">
          <label>Human Resource</label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="1" [rowspan]="4">
      <div>
        <div class="details" *ngFor="let label of labels2">
          <label><strong>{{ label.name }}</strong></label>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <div>
        <div class="details">
          <label>9178384567</label>
        </div>

        <div class="details">
          <label>Phoenix</label>
        </div>

        <div class="details">
          <label>Male</label>
        </div>

        <div class="details">
          <label>Aug 21, 2019</label>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</mat-card-content>

Answer 1

这是一个完全响应的解决方案；

  <mat-card-content fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start stretch">
    <div fxLayout="row">
      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details" *ngFor="let label of labels">
          <label><strong>{{ label }}</strong></label>
        </div>
      </div>

      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details">
          <label>1</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Robert Williams</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>robert@gmail.com</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Human Resource</label>
        </div>
      </div>
    </div>

    <div fxLayout="row">
      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details" *ngFor="let label of labels2">
          <label><strong>{{ label }}</strong></label>
        </div>
      </div>

      <div fxLayout="column" fxFlex.xs="50%">
        <div fxFlex="25%" class="details">
          <label>9178384567</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Phoenix</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Male</label>
        </div>

        <div fxFlex="25%" class="details">
          <label>Aug 21, 2019</label>
        </div>
      </div>
    </div>
  </mat-card-content>

我还建议添加以下样式以在非常小的屏幕中正确中断文本

.details > label {
  overflow-wrap: break-word;
}

这是一个工作演示：https://stackblitz.com/edit/angular-ivy-9vpkl1

更新

为了有一个更紧凑的模板，创建一个将标签和数据保存在一起的数组

  datas = [
    {label: "ID", text: "1"},
    {label: "Mobile", text: "9178384567"},
    {label: "Full Name", text: "Robert Williams"},
    {label: "City", text: "Phoenix"},
    {label: "Email", text: "robert@gmail.com"},
    {label: "Gender", text: "Male"},
    {label: "Department", text: "Human Resource"},
    {label: "Hire Date", text: "Aug 21, 2019"},
  ]

<mat-card-content fxLayout="row wrap" fxLayoutAlign="start stretch">
  <div fxFlex="50%" fxFlex.xs="100%" fxLayout="row" *ngFor="let data of datas">
    <div fxFlex="50%" class="details">
      <label><strong>{{data.label}}</strong></label>
    </div>
    <div fxFlex="50%" class="details">
      <label>{{data.text}}</label>
    </div>
  </div>
</mat-card-content>

演示：https://stackblitz.com/edit/angular-ivy-g9vt6h

希望对你有帮助。