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

Question

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

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

希望对您有所帮助。

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

Layout Broken on Small Devices In Angular

css

angular

angular-material

angular7

angular-flex-layout