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

Question

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

类别.组件.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>

类别.组件.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit {
  sortableList = [];

  senddata(value, i): void {
    var a = value;
    var current = this.sortableList.length;
    console.log('Value ' + a);
    console.log('Current ' + current);
    this.sortableList.splice(i, 1, {
      id: current,
      title: a,
      editing: false
    });
  }

  addCatagory(): void {
    var current = this.sortableList.length;
    this.sortableList.push({
      id: current + 1,
      title: 'Catagory ' + (current + 1),
      editing: true
    });
  }

  delCatagory(a): void {
    var pos = this.sortableList
      .map(function(e) {
        return e.title;
      })
      .indexOf(a);
    this.sortableList.splice(pos, 1);
  }

  spliceCategory(a): void {
    var value = a;
    var current = this.sortableList.length;
    console.log('Value ' + value);
    console.log('Current ' + current);
  }

  editCategory(a): void {
    var value = a;
    var current = this.sortableList.length;
    this.sortableList.push({
      id: current + 1,
      title: 'Catagory ' + (current + 1),
      editing: false
    });
  }

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {}
}

错误

ERROR TypeError: "_co.box is undefined"
View_CategoriesComponent_5ng:///AppModule

/CategoriesComponent.ngfactory.js:28:11
handleEventhttp://localhost:4200/vendor.js:41342:16
callWithDebugContexthttp://localhost:4200/vendor.js:42435:22
debugHandleEventhttp://localhost:4200/vendor.js:42138:12
dispatchEventhttp://localhost:4200/vendor.js:38801:16
renderEventHandlerClosurehttp://localhost:4200/vendor.js:39245:38
decoratePreventDefaulthttp://localhost:4200/vendor.js:51364:36
invokeTaskhttp://localhost:4200/polyfills.js:2743:17
onInvokeTaskhttp://localhost:4200/vendor.js:34899:24
invokeTaskhttp://localhost:4200/polyfills.js:2742:17
runTaskhttp://localhost:4200/polyfills.js:2510:28
invokeTaskhttp://localhost:4200/polyfills.js:2818:24
invokeTaskhttp://localhost:4200/polyfills.js:3862:9
globalZoneAwareCallbackhttp://localhost:4200/polyfills.js:3888:17 
CategoriesComponent.html:35:10

Answer 1

我遇到了这个问题，如果我没记错的话:问题是在发送带有输入的数据时，它们需要具有唯一的 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>

所有输入 ID 都将以相同的字符开头，并在末尾有一个唯一的数字，从而使它们独一无二:

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