Question

在前端（角度）中，我有一个包含许多输入字段的表单。我想要一个特定字段，其中包含来自数据库的元素列表（csv格式）。因此，我从服务器Java发出请求以检索包含数据库所有项目的列表（ listOfArticles 是对象的数组）。

Component.ts ：

  getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { this.listOfArticles = res; console.log('reponse:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));
    });
  }

然后，在 component.html 中，我尝试在输入上调用函数 getListBdd（），并在 listOfArticles 上使用ngFor指令。获取所有参考编号（“ listOfArticles.refNumber.input ”返回字符串）：

<input (keyup)="getListBdd()" list="refNumbers"  formControlName="refNb" type="text" name="article[2][ref]" maxlength="15" size="15" required title="3 characters minimum"  />

          <datalist id="refNumbers" *ngFor="let ref of listOfArticles.refNumber.input">
              <option value="ref">
            </datalist>

在我的控制台中，我收到此错误“无法读取未定义的属性'refNumber'”，我认为它来自前面（在 component.html 中），但我不知道如何解决。

整个 component.ts ：

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';


import { ManagementArbologistiqueService } from "../management-arbologistique.service";

import { ActivatedRoute, Params } from '@angular/router';
import { FormGroup, FormControl, FormBuilder, FormArray, Validators } from '@angular/forms';
@Component({
  selector: 'app-arbologistique',
  templateUrl: './arbologistique.component.html',
  styleUrls: ['./arbologistique.component.css']
})
export class ArbologistiqueComponent implements OnInit {

  private reponseTest: String;
  private listOfArticles :Array<Object>
  private pathDownload: any;
  private formGroupArbologistique: FormGroup;
  fileToUpload: File = null;
  private buttonSubmitEnabled: boolean = false;

  constructor(public fb: FormBuilder, private managementArbo: ManagementArbologistiqueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.formGroupArbologistique = this.fb.group({
      itemRows: this.fb.array([this.initItemRows()])
    })

    this.formGroupArbologistique.valueChanges.subscribe(x => this.buttonSubmitEnabled = false);
  }

  initItemRows() {
    return this.fb.group({
      ... //other fields
      refNb: ['',Validators.required],
      ... //other fields

    })
  }

  addRow(index: number) {
    console.log("functionAddRow called");
    const control = <FormArray>this.formGroupArbologistique.controls['itemRows'];
    control.insert(index, this.initItemRows());

  }

  deleteRow(index: number) {
    console.log("functionDeleteRow called");
    const control = <FormArray>this.formGroupArbologistique.controls['itemRows'];
    control.removeAt(index);
  }

  sendForm() {
    this.buttonSubmitEnabled=true;
    console.log("functionExportCalled");
    this.route.params.subscribe((params: Params) => {
      let subroute = "exportation";
      this.managementArbo.postProducts(subroute, JSON.stringify(this.formGroupArbologistique.value))
        .subscribe(
          res => { this.reponseTest = res; console.log('reponse:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));

    });
  }

  getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { this.listOfArticles = res; console.log('reponse:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));
    });
    console.log("functionGetListBdd called " +this.listOfArticles);
  }

  get refNb() {
    return this.formGroupArbologistique.get('itemRows.refNb');
} 
}

整个 component.html ：

  <form autocomplete="off" (ngSubmit)="sendForm()" [formGroup]="formGroupArbologistique">
    <div formArrayName="itemRows">
      <table cellspacing="10" id="ajout_multi_articles">
        <thead>
          <tr>
            <!-- other table headers -->
            <th>Reference Number</th>
            <!-- other table headers -->

          </tr>
        </thead>
        <tbody>

          <tr class="article" *ngFor="let itemrow of formGroupArbologistique.controls.itemRows.controls; let i=index" [formGroupName]="i">
            <!-- other table columns -->
            <td>
              <input (keyup)="getListBdd()" list="refNumbers"  formControlName="refNb" type="text" name="article[2][ref]" maxlength="15" size="15" required title="3 characters minimum"  />

                <datalist id="refNumbers" *ngFor="let ref of listOfArticles.refNumber.input">
                  <option value="ref">
                </datalist>
            </td>
            <!-- other table columns -->

            <td>
              <button type="button" class="btnAdd" style="background:url(assets/img/add.png)" (click)=addRow(i+1)>

              </button>
            </td>
            <td>
              <button type="button" class="btnDelete" style="background:url(assets/img/delete.png)" *ngIf="formGroupArbologistique.controls.itemRows.controls.length > 1" (click)=deleteRow(i)>
              </button>
            </td>
          </tr>

          <button type="submit" [disabled]="!formGroupArbologistique.valid" >Valider</button>


        </tbody>


      </table>
    </div>
  </form>

  <a href="########" style="text-decoration:none;" download> 
    <button [disabled]="!formGroupArbologistique.valid || !buttonSubmitEnabled">Download</button>
  </a>

对不起，我没有语法错误。而不是写：

<datalist id="refNumbers" *ngFor="let ref of listOfArticles">
        <option value="ref.refNumber.input">
</datalist>

我写了：

<datalist id="refNumbers" *ngFor="let ref of listOfArticles.refNumber.input">
       <option value="ref">
</datalist>

所以，现在，控制台中不再显示任何错误，但是我仍然无法显示参考编号列表。当我用：

显示列表时

<ul>
    <li *ngFor = "let ref of listOfArticles">
        ref: {{ref.refNumber.input}}
    </li>
</ul>

=>效果很好

但是当我尝试在数据列表中显示列表时，没有列表出现。也许ngFor属性在数据列表中不起作用？

Answer 1

最后，我找到了在数据列表中获取参考编号列表的解决方案：

<datalist id="thalesNumbers">
     <option *ngFor="let ref of listOfArticles">{{ref.refNumber.input}}</option>
</datalist>

希望这可以帮助某人！

角度4：来自bdd的元素的输入列表html（csv格式）

1 个答案: