充当没有提交按钮的表单的异步元素

Question

好的，所以这似乎有很多问题。我一直把头撞在桌子上试图弄清楚这一点。举个例子：

<ul>
   <li>Number: <span id="Number">123</span></li>
</ul>

我想在 id 为“Number”的跨度和数据库之间创建一个异步链接。是否可以让用户单击元素，然后可以更改输入，然后在 Enter/Return 或取消焦点时将更新的值发送到数据库？这只是一个小型的个人项目，我想为此添加一点独特性。所以任何帮助都会很棒！

**更新

所以现在我几乎把它放在了需要的地方。但是apiCall() 函数不会使用显示数据的插值方法调用。关于如何解决这个问题的任何想法？下面是代码和错误：

<table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">Expense</th>
                <th scope="col">Amount</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let exp of expenses">
                <tr>
                    <th scope="row"><input type="text" class="formless" name="{{exp.expense}}" placeholder="{{exp.expense}}" (focusout)="apiCall({{exp.id}}, {{exp.expense}})"></th>
                    <td><input type="text" class="formless" placeholder="{{exp.price}}"></td>
                  </tr>
              </ng-container>
            </tbody>
          </table>

错误：

error NG5002: Parser Error: Unexpected
token {, expected identifier, keyword, or
string at column 10 in [apiCall({{exp.id}},
{{exp.expense}})] in
<path>\budget-app\src\app\home\home.component.html@29:137

Answer 1

您可能想尝试使用<input/> 而不是跨度，以便它始终是可编辑的。为了节省更新，您可以在 html 中在 (focusout) 上引入一些功能。

<input [(ngModel)]="variableForStoringData" (focusout)="saveApiCall()" />

Answer 2

您可以在 span 内添加一个输入框并移除边框。然后将模糊事件侦听器分配给该输入框并运行您的代码以更新数据库。

下面的 sn-p 通过在离开输入框时将值写入控制台来演示这一点。您可以替换它并添加代码以写入数据库。

document.querySelector(`#Number`).addEventListener(`blur`, (event) => {
  const val = event.target.value;
  console.log(val);
  //TODO: your code to transmit data
});

* {
  font-family: sans-serif;
}

input {
  border: none;
  width: 50px;
}

<ul>
  <li>Number:
    <span>
    <input id="Number" type="number" value="123">
    </span>
  </li>
</ul>