单击时将新行添加到表中,并填充新的黑色行

时间:2018-06-20 13:34:20

标签: angular typescript html-table dynamic-tables

我有一张表,其中显示了werbedata的商品编号和描述。我想在表格中填充的所有数据之后添加新的文章和说明,当我单击添加时,该行应保持原样,并在其下添加新的空白行。现在,我可以添加新行,但是它消失了,只有空白字段再次生成。下面是我的代码:

HTML:

<md-card class="default-card">
  <h1>{{ 'Edit Details' }}</h1>
</md-card>

<div class="flex">
  <md-card class="werbedata-details">
    <div *ngIf="werbedata">
      <md-input-container>
        <input mdInput placeholder="{{ 'Werbe Nummer' }}" [(ngModel)]="werbedata.WERBE_NR" name="WERBENR" disabled type="text">
      </md-input-container>
      <md-input-container>
        <input mdInput placeholder="{{ 'Produkt Name (Werbe Name)' }}" [(ngModel)]="werbedata.Produktbez" name="Produkt Name">
      </md-input-container>
      <md-input-container>
        <input mdInput placeholder="{{ 'Werbetext' }}" [(ngModel)]="werbedata.Werbetext" name="Werbetext">
      </md-input-container>
      <md-input-container>
        <input mdInput placeholder="{{ 'Produkt Bezeichnung' }}" [(ngModel)]="werbedata.Produktbez" name="Bezeichnung">
      </md-input-container>
      <md-input-container>
        <input mdInput placeholder="{{ 'VK-Einheit' }}" [(ngModel)]="werbedata.MGEHT" name="MGEHT">
      </md-input-container>
    </div>
  </md-card>
  <md-card class="werbenumber-list">
    <md-card-content>
      <table>
        <thead>
          <th> Artikle </th>
          <th> Description </th>
        </thead>
        <tbody>
          <tr *ngFor="let product of this.products">
            <td>{{ product.ARTNR }}</td>
            <td>{{ product.PRODUKTBEZ }}</td>
          </tr>
          <tr>
            <td>
                <input class="form-control" type="text" id="newValuesARTNR" [(ngModel)]="newValues.ARTNR" name="newValuesARTNR" />
            </td>
            <!-- <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.PRODUKTBEZ" name="newAttributePRODUKTBEZ" />
            </td> -->
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue(newValues.ARTNR)">Add</button>
            </td>
        </tr>
        </tbody>
      </table>
    </md-card-content>
  </md-card>
  <div class="endbuttons" align="end">
    <button md-raised-button (click)="goBack()">
      {{ 'cancel' }}
      <md-icon>cancel</md-icon>
    </button>
    <button md-raised-button color="primary" (click)="editWerbedata(werbedata)">
      {{ 'save' }}
      <md-icon>save</md-icon>
    </button>
  </div>
</div>

EditDetailsPage.ts

  getWerbeData(filialewerbenr) {
    this.werbedataService.getWerbeData(filialewerbenr)
      .then(
        werbedata => {
          this.werbedata = werbedata[0];
          let artns = this.werbedata.ArtNr.split(' ');
          this.anums = artns;
          for (let a of artns) {
            this.getProduktData(this.werbedata.FILIALE + a);
          }
        },
        error => this.errorMessage = <any>error
      );
  }

  getProduktData(artnr) {
    this.produktService.getProdukt(artnr)
      .then(
        (produkt: Produkt) => {
          produkt[0] = this.InitiateImagesUrls(produkt[0]);
          this.produkt = produkt[0];
          if (this.products.indexOf(this.produkt) === -1) {
            this.products.push(this.produkt);
          }
          this.urls.push(this.produkt.PfadBild_1);
        },
        error => this.errorMessage = <any>error,
    );
  }

  addFieldValue(artnr) {
    this.werbedata.ArtNr = this.werbedata.ArtNr + ' ' + artnr;
    console.log('new values', this.werbedata.ArtNr);
    this.newValues = {};
}

  editWerbedata(werbedata) {
    this.werbedataService.updateWerbedata(this.werbedata)
      .then(
        response => {
          console.log('edit function', response);
        }
      );
  }

我要在这里做的是编辑Werbedata的所有详细信息。我正在理解如何将带有新文章和说明的新添加的行添加到我的“ update werbedata”方法中。

MyJsonObject:


0:
Aktiv_Log:""
Aktiv_Log_leer:""
ArtNr:"3323 3319 3322 3331 3309 3317 3316 3329 3330 3332 3324"
ArtNr_01:"3323"
ArtNr_01_Name:"Schoko-Krokant 2 kg"
ArtNr_01_PRZ:""
ArtNr_01_S:"H3323"
ArtNr_02:"3319"
ArtNr_02_Name:"Schoko 2 kg"
ArtNr_02_PRZ:""
ArtNr_02_S:"H3319"

等等...

有人可以告诉我该怎么做吗?

1 个答案:

答案 0 :(得分:1)

您要做的是在创建products对象之后,从表单中获取值并将其添加到product数组中。

我创建了一个stackblitz来进行演示。看一看。