Nativescript 中 *ngFor 和 GridLayout 的问题

Question

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

    <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;
      }
    }
  }

Answer 1

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

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

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

提醒：{N} GridLayout 的rows 和columns 采用：

• 绝对数：表示固定大小。
• 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>

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

    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 }}，要么使用方括号绑定[]，但不能同时使用两者，当然，<label> 内的col="x" 之后不需要逗号属性。