Javascript 使用ngIf时无法发送输入数据

我正在创建一个应用程序，允许用户添加类别并重新排序。按“添加类别”时，它会在表中创建一个新行，并显示一个输入表单，允许用户命名该类别。但是，如果输入中包含*ngIf，我无法将表单数据发送到“保存”按钮。我甚至尝试将if语句放在围绕输入的div上，但都没有用。我只是得到输入是未定义的

categories.component.html

<div class="container table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <p class="ml-3 mt-2 mb-0 float-left">Section</p>
      <a href="#" class="add-category mt-3 mr-3" (click)="addCatagory()">+ ADD CATEGORY</a>
      <tr>
        <th scope="col"></th>
        <th scope="col">CATEGORY</th>
        <th scope="col" class="mt-3">SEQ.</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody dragula="categories" [(dragulaModel)]="sortableList" id="tbody">
      <tr *ngFor="let row of sortableList; index as i;">
        <th scope="row" class="sort-cell">
          <button class="btn bg-transparent">
            <img src="/assets/images/sortable.svg" alt="">
          </button>
        </th>
        <td>
          <p *ngIf="!row.editing">
            {{row.title}}
          </p>

          <input #box placeholder="Category Name">

        </td>
        <td>
          <p class="seq text-white text-center">{{i + 1}}</p>
        </td>
        <td class="text-right">
          <button class="btn bg-transparent border-0" (click)="delCatagory(row.title)">
            <img *ngIf="!row.editing" src="/assets/images/delete.svg" alt="">
          </button>
          <a *ngIf="row.editing" href="#" class="add-category mt-3 mr-3" (click)="senddata(box.value, i)">Save</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

错误

---

我有这个问题，如果我没有弄错的话：问题是当发送带有输入的数据时，它们需要有唯一的ID，以便在不同的操作中彼此不同

由于输入是使用*ngFor创建的，因此您可以在ID属性中添加一个通用名称，并附加*ngFor的索引值：

<tbody dragula="categories" [(dragulaModel)]="sortableList" id="tbody">
          <tr *ngFor="let row of sortableList; index as i;">
            <th scope="row" class="sort-cell">
              <button class="btn bg-transparent">
                <img src="/assets/images/sortable.svg" alt="">
              </button>
            </th>
            <td>
              <p *ngIf="!row.editing">
               {{row.title}}
              </p>

              <input #box placeholder="Category Name" id="CategoryName{{i}}">

            </td>
            <!-- ... -->
          </tr>
        </tbody>

{{row.title}}

所有输入ID将以相同的字符开头，并在末尾有一个唯一的数字，从而使其唯一：

<input #box placeholder="Category Name" id="CategoryName0">
<input #box placeholder="Category Name" id="CategoryName1">
...
<input #box placeholder="Category Name" id="CategoryNameN">

...

很抱歉问一下，JS代码中的选择器正确吗？也许，您可以使用jQuery或纯JavaScript来确认这一点。这可能是因为

ngIf

位于

ngFor

中。我不确定Angular如何处理

#box

内部

ngFor

之类的模板变量。可能是在

ngIf

中丢失了包含变量的上下文。Angular的文档并不清楚这类事情。你能做一些类似于

[（ngModel）]=“row.categoryName”

的事情，然后使用row对象中的值吗？嗯，我试过了，结果发现它无法绑定到“ngModel”，因为它不是“input”的已知属性。很好！我来试一试。现在我通过使用[hidden]=“！row.editing”来“修复”这个问题，这是一个有效的解决方案吗？这可能对任何在搜索相同问题时发现此线程的人都有好处。它还将发出明确的信号，让人们在必要时找到其他解决办法。

<tbody dragula="categories" [(dragulaModel)]="sortableList" id="tbody">
          <tr *ngFor="let row of sortableList; index as i;">
            <th scope="row" class="sort-cell">
              <button class="btn bg-transparent">
                <img src="/assets/images/sortable.svg" alt="">
              </button>
            </th>
            <td>
              <p *ngIf="!row.editing">
               {{row.title}}
              </p>

              <input #box placeholder="Category Name" id="CategoryName{{i}}">

            </td>
            <!-- ... -->
          </tr>
        </tbody>

<input #box placeholder="Category Name" id="CategoryName0">
<input #box placeholder="Category Name" id="CategoryName1">
...
<input #box placeholder="Category Name" id="CategoryNameN">