角型小型设备上的布局损坏

debugcn 发表于 Dev

约瑟夫

我在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>[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>

特别是

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

  <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.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: "[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.com/edit/angular-ivy-g9vt6h

希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。