显示在 table 中输入的值

Question

创建 table 并在单击提交按钮时显示值。提交数据时显示的值

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app1';
    private fieldArray: Array<any> = [];
    private newAttribute: any = {};
    addFieldValue() {
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }
    /* ngOnInit(){
    console.log(this.fieldArray);
    } */
}

Answer 1

使用 ngIf 测试所选产品是否存在，并将产品名称数据绑定到标题。在组件上创建一个 recentlySelected 属性，然后单击将 recentlySelected 属性设置为单击的产品或产品名称的值。

<h3 style="color:darkmagenta"  *ngIf="recentlySelected" >Recently added products:{{recentlySelected}}</h3>

这是一个例子：

https://stackblitz.com/edit/angular-ngif-click-zdb9ng?file=app/app.component.html

Answer 2

可以在class组件中维护一个recentlyAddedProducts列表，将新增的数据推送到这个列表中。然后像这样在模板中呈现该列表：

组件class：

recenltyAddedProducts: Array<any> = [];
       private fieldArray: Array<any> = [];
       private newAttribute: any = {};
       addFieldValue() {
       this.fieldArray.push(this.newAttribute)

       this.recenltyAddedProducts.push(this.newAttribute);
       this.newAttribute = {};
       }

像这样设置模板：

<h3 style="color:darkmagenta" >Recently added products:</h3>
    <div *ngFor="let p of recenltyAddedProducts">
      <span>
        {{p.productName}}
      </span>
      <span>
        {{p.quantity}}
      </span>

查看展示演示的 stackblitz：

https://stackblitz.com/edit/angular-jvfmfe?file=app/button-overview-example.ts

您可以更新代码以仅显示最近添加的 3 个产品。

编辑

要仅显示一个最近的产品，请进行以下更改：

组件class：

recenltyAddedProduct;
       private fieldArray: Array<any> = [];
       private newAttribute: any = {};
       addFieldValue() {
       this.fieldArray.push(this.newAttribute)

       this.recenltyAddedProduct = this.newAttribute;
       this.newAttribute = {};
       }

有这样的模板：

<h3 style="color:darkmagenta" >Recently added products:</h3>

      <span>
        {{recenltyAddedProduct?.productName}}
      </span>
      <span>
        {{recenltyAddedProduct?.quantity}}
      </span>

要在 h3 标签中显示，请使用如下模板：

<h3 style="color:darkmagenta" >Recently added products: <span>
        {{recenltyAddedProduct?.productName}}
      </span>
      <span>
        {{recenltyAddedProduct?.quantity}}
      </span></h3>

显示在 table 中输入的值

display the value entered in table

angular5