0

我的网格布局有问题。我的代码是这个：

    <GridLayout padding="10%"columns="auto, auto, auto, auto, auto, auto, auto" rows="*">
      <ng-container *ngFor="let item of items">
        <label [text]="item.codice" col="0",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.prodotto" col="1",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.lottoData" col="2",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.codiceCont" col="3",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.qtyUntPri" col="4",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.studioCieco" col="5",[row]="{{item.row}}"fontSize="24px"></label>
        <label [text]="item.qty" col="6",[row]="{{item.row}}"fontSize="24px"></label>
      </ng-container>
    </GridLayout>

我希望看到每个项目的这些列和一行，但我有一些你可以在下图中看到的内容：

在此处输入图像描述

如果您需要查看打字稿

  ngOnInit(): void {
    var usefulData = this.data["param"]["response"];
    var firstTable = usefulData[0];
    var secondTable = usefulData[1];
    this.studyCode = firstTable[0]["StudyCode"];
    this.nameFile = firstTable[0]["NameFile"];
    var row = 1;
    for (var i in secondTable){
      if(secondTable[i] != undefined){
        this.items.push({
        codice:secondTable[i]["Codice"],
        prodotto:secondTable[i]["Product"],
        lottoData:secondTable[i]["LottoData"],
        codiceCont:secondTable[i]["CodiceCont"],
        qtyUntPri:secondTable[i]["QtyUntPri"],
        studioCieco:secondTable[i]["StudioCieco"],
        qty:secondTable[i]["Qty"],
        row:row
      });
      row+=1;
      }
    }
  }
4

1 回答 1

1

您声明了GridLayoutwith rows="*"，这意味着您只有一行：

<GridLayout padding="10%"columns="auto, auto, auto, auto, auto, auto, auto" rows="*">

这就是您在提供的屏幕截图中看到重叠的压缩文本的原因。

提醒： {N} GridLayout 的rowsandcolumns采用：

  • 绝对数：表示固定大小。
  • auto：使列与其最宽的子项一样宽，或使行与其最高的子项一样高。
  • *：填充所有自动和固定大小的列或行后，占用尽可能多的空间。

要解决此问题，您需要设置rows属性以反映您的GridLayout. 例如，如果您有一个带有[row]="{{item.row}}", 并且最大值item.row= 5 的项目，那么您GridLayout应该像下面这样声明：

<GridLayout
    padding="10%"
    columns="auto, auto, auto, auto, auto, auto, auto"
    rows="auto, auto, auto, auto, auto" <-- note the 5 rows
>
    <!-- child elements ... -->
</GridLayout>

在您的示例中，您似乎必须计算行数并将其绑定到 的rows属性Gridlayout，如下所示：

    public gridRows: string;


    ngOnInit(): void {
        var usefulData = this.data['param']['response'];
        var firstTable = usefulData[0];
        var secondTable = usefulData[1];
        this.studyCode = firstTable[0]['StudyCode'];
        this.nameFile = firstTable[0]['NameFile'];
        var row = 1;
        for (var i in secondTable) {
            if (secondTable[i] != undefined) {
                this.items.push({
                    codice: secondTable[i]['Codice'],
                    prodotto: secondTable[i]['Product'],
                    lottoData: secondTable[i]['LottoData'],
                    codiceCont: secondTable[i]['CodiceCont'],
                    qtyUntPri: secondTable[i]['QtyUntPri'],
                    studioCieco: secondTable[i]['StudioCieco'],
                    qty: secondTable[i]['Qty'],
                    row: row,
                });
                row += 1;
            }
        }

        const rowsCount = row;
        this.gridRows = Array.from({ length: rowsCount }, (_, idx) => `auto`).toString();
    }

<GridLayout
    padding="10%"
    columns="auto, auto, auto, auto, auto, auto, auto"
    [rows]="gridRows"
>
      <ng-container *ngFor="let item of items">
        <label [text]="item.codice" col="0" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.prodotto" col="1" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.lottoData" col="2" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.codiceCont" col="3" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.qtyUntPri" col="4" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.studioCieco" col="5" [row]="item.row" fontSize="24px"></label>
        <label [text]="item.qty" col="6" [row]="item.row" fontSize="24px"></label>
      </ng-container>
    </GridLayout>

注意：要么使用字符串外推法，要么{{ expression }}使用方括号绑定[]，但不能同时使用两者，当然，属性col="x"内部也不需要逗号<label>。

于 2022-01-19T19:19:33.953 回答