繁体   English   中英

如何有条件地向表中添加一行?

How to add a row to table conditionally?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在构建一个 angular 应用程序,我将在其中将项目添加到表中。 添加的行将基于项目名称及其数量的输入。

如果出现以下情况,我正在努力防止将项目添加到表格中:

  • 未选择任何内容或
  • 在数量字段中输入非正数(数量字段仅接受自然数)

如果不满足这些条件中的任何一个,将显示一条错误消息。 我能够显示错误消息,但添加了一行无效字段。

注意:如果不满足条件,我不允许禁用“添加项目”按钮。

这是我的代码:

app.component.html

<form #order="ngForm">
    <table>
      <tr>
        <td>
          <button type="submit" class="btn btn-default" (click)="addItem()">Add
            Item</button>
        </td>
        <td>
          <select [(ngModel)]="newItem.name" required name="newItemName" #newItemName="ngModel" minlength="1">
            <option *ngFor="let o of options" [ngValue]="o">{{o.name}}</option>
          </select>
        </td>
        <td>Qty</td>
        <td>
          <input type="text" pattern="[0-9]*" required [(ngModel)]="newItem.quantity" 
          name="newItemQuantity" #newItemQuantity="ngModel">
        </td>
      </tr>
    </table>
    <p *ngIf="newItemName?.errors?.required && order.submitted">Please select an item.</p>
    <p *ngIf="newItemQuantity?.errors?.required && order.submitted">Quantity is required.</p>
  </form>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of items; let i = index">
        <td><label class="form-control">{{item.name.name}}</label></td>
        <td><label class="form-control">{{item.quantity}}</label></td>
        <td><label class="form-control">{{item.name.price}}</label></td>
        <td></td>
        <td><input type="button" value="delete" (click)="removeItem(i)"></td>
      </tr>
    </tbody>
  </table>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent {
  items: Array<any> = [];
  newItem: any = {};
  options = [
    {name: "apples", price: 1.19},
    {name: "peaches", price: 1.39},
    {name: "pears", price: 1.69},
    {name: "plums", price: 1.59}
  ];

  addItem() {
    if (this.newItem != undefined) {
      this.items.push(this.newItem);
      this.newItem = {};
    }
  }

  removeItem(index) {
    this.items.splice(index, 1); // remove 1 item at ith place
  }

}

项目仍在添加

3 个回复

只需在 add 方法的开头添加一个条件:

addItem() {
  if(!this.newItem || !this.newItem.name || 
      (this.newItem && !this.newItem.name)) {
    return;
  }

  this.items.push(this.newItem);
  this.newItem = {};
}

您必须修改addItem() function 以检查namequantity是否已定义且有效。 并且仅在条件为真时添加项目。

addItem() {
  if (this.newItem && this.newItem.name && this.newItem.quantity &&
    this.newItem.quantity > 0 && Number.isInteger(Number(this.newItem.quantity))) {
    this.items.push(this.newItem);
    this.newItem = {};
  }
}

Number.isInteger()方法可用于检查quantity是否为有效 integer。 这确保不允许使用小数。

StackBlitz 上的现场演示: https://stackblitz.com/edit/angular-vqcikf

这是你的答案,检查 newItem object 是否存在(不等于 undefined),然后检查名称 key & value 是否存在(不等于 undefined 和空字符串''),然后检查数量 key & value 是否存在(不等于到未定义和空字符串''),然后确保数量值大于0。

addItem() {
  if(this.newItem && this.newItem.name && this.newItem.quantity && this.newItem.quantity > 0) {
    this.newItem.quantity = Number(this.newItem.quantity);
    this.items.push(this.newItem);
    this.newItem = {};
  }
}

注意:JS 会处理字符串数据和数值之间的比较

例子:

"1.11" > 1 //true
"0.01" < 0 //false
"1.0a" > 0 // undefined (which is evaluated as false)
2 有条件地将行添加到数据框

嗨,我有n个数据框,分别通过for循环打开 我想做的是只打开一个遵守某种条件的行,并逐行合并它们,例如 但是我得到这个错误 非常感谢 ...

2014-03-13 18:57:49 1 463   r
3 如何在角度5中有条件地向表中添加行

我是Angular 5的app.component.ts ,我的app.component.ts有一个对象数组。 我想同时使用*ngFor和*ngIf来创建表的行并同时应用条件。 基本上像 但是,这是不允许的,并显示错误: 一个元素不能有多个模板绑定。 如何实现呢? ...

4 如何在表格中添加行

这是我的桌子从一开始的样子 我想做的是每当我单击“添加按钮”(最右边的绿色按钮)时再排一行。 因此,我有两个“添加按钮”,一个是添加包含选择类别的另一行(应将其放置在项目/规范行下方),另一个是为项目/规范添加另一行。 我正在使用boostrap,顺便说一句。 但是,我的输 ...

5 如何在表格中添加一行?

我想要达到的目标: 如果子表有一行填充,我想添加一个新行。 我试过的因为我有 10 个父表,所以我不能使用Cells(Cells.Rows.Count, "E").End(xlUp).Row因为它只会计算最后一个父表。 所以我尝试用列表对象来做。 当我尝试添加列表对象时: (Rij = ...

7 有条件地添加新行xslt

我有以下XML: 在输出HTML中,仅当上述Table元素具有“ SPECIALMATERIAL”作为其Class属性的任何列时,我才需要隐藏PARTNUMBER列; 其次,我需要在“ figure”标签行之后插入新行。 在这种情况下,新行应排在第二个位置。因此,最终HTML将如下所 ...

10 如何根据下拉选择有条件地显示表格行?

我搜寻了高低,但仍然无法弄清楚。 我正在创建一个引导表单的网站,并且有一个名为Referral的下拉字段,可以选择Internet,Friend等。 如果他们选择“朋友”,我希望在“朋友名称”下面显示一个表格行,他们可以在其中输入朋友的名字。 如果选择了其他选项,它将被隐藏。 请 ...

2015-02-05 16:56:53 1 163   java/ html
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM