使用 @if 和 @for 在 Angular 上创建 div 的动态网格

Question

我想在 Agnular 19 上使用 @if 和 @for 创建一个基于列表的动态 div 网格。 例如，如果我的列表包含 5 个项目，我应该有 2 行：第一行有 3 列，第二行有 2 列。

但我有一个错误：

NG5002：意外关闭块。该街区可能已提前关闭。如果您打算编写 } 字符，则应使用“}”HTML 实体。

我的代码：

@for(tool of toolsList.default; track tool.name; let toolsListIdx = $index) {
  @if(toolsListIdx % 3 == 0) {
    <div class="row mb-2 text-left">
  }
  <div class="col-sm-4">
    <div class="card my-0 py-0 px-3">
      <div class="card-body">
        <h5 class="text-center">{{ tool.name }}</h5>
        @for(item of tool.items; track item.name; let idxItem = $index) {
          <div class="d-flex align-items-center mb-1">
            <input class="cform cform-custom-checkbox-radio col-2" type="checkbox" />
            <label class="col-10 mx-1">{{ item.name }}</label>
          </div>
        } 
      </div>
    </div>
  </div>
  @if(toolsListIdx % 3 == 2) {
    </div>
  }
}

Answer 1

@for(tool of toolsList.default; track tool.name; let toolsListIdx = $index) {
  @if(toolsListIdx % 3 == 0) {
    <div class="row mb-2 text-left">
  }
  <div class="col-sm-4">
    <div class="card my-0 py-0 px-3">
      <div class="card-body">
        <h5 class="text-center">{{ tool.name }}</h5>
        @for(item of tool.items; track item.name; let idxItem = $index) {
          <div class="d-flex align-items-center mb-1">
            <input class="cform cform-custom-checkbox-radio col-2" type="checkbox" />
            <label class="col-10 mx-1">{{ item.name }}</label>
          </div>
        } 
      </div>
    </div>
  </div>
  @if(toolsListIdx % 3 == 0) {
    </div>
  }
}

尝试以上方法。事实上，您正在执行toolsListIdx % 3 == 0来打开您的div，并使用toolsListIdx % 3 == 2来关闭您的包装div，这意味着您的代码中至少存在逻辑错误。