在Angular中，小设备上的布局被破坏了。

Question

我在我的Angular应用中使用Angular Material和Angular Flex-Layout，我在移动设备上显示文本时遇到了一个问题。正如你可以看到在小的scree，标签有被切割。如果在移动设备上，我如何显示它不被切割，或者我认为其他列应该堆叠在下面，检查下面这张图片的当前输出。另外，是否有一种有效的方法来迭代标签和值，而不需要在html中放入许多divs？

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>[email protected]</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>[email protected]</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.comeditangular-ivy-9vpkl1。

更新

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

  datas = [
    {label: "ID", text: "1"},
    {label: "Mobile", text: "9178384567"},
    {label: "Full Name", text: "Robert Williams"},
    {label: "City", text: "Phoenix"},
    {label: "Email", text: "[email protected]"},
    {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.comeditangular-ivy-g9vt6h。

希望对大家有所帮助。