Question

我在剑道角网格中遇到了反应形式的问题。我的模型（书）有一组作者，我想在我的网格列中显示。但我没有找到任何有关如何使用反应形式的收集的信息。所以我的模板没有正确显示数据。

这是我在formGroup中的作者集合：

this.formGroup = createFormGroup({
  genre: {
    genreId: 0,
    genreName: ''
  },
  'bookName': '',
  'pages': 0,
  'publisher': '',
  //here
  authors: new Array<Author>()
});

我应该如何在formGroup中声明作者？我这样做了吗？

我的html模板：

<kendo-grid-column field="authors" title="Authors" width="250">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.authors">
        <ul>
          <li *ngFor="let author of dataItem.authors">
            <strong>{{author.authorsName }}</strong>
          </li>
        </ul>        
      </div>
    </ng-template>

正如我在开头写的那样，模板无法正常工作。如果您有任何问题，我很乐意回答您。我希望得到你的帮助。

UPD： 我改变了我的FormGroup

this.formGroup = this.fb.group({
  'genre': {
    genreId: 0,
    genreName: ''
  },
  'bookName': '',
  'pages': 0,
  'publisher': '',
  authors: this.fb.array([{
    authorId: [''],
    authorName: [''],
  }]),
  //authors: this.fb.array([]),
});

FormControls初始化：

const createFormGroup = dataItem => new FormGroup({
  'bookId': new FormControl(dataItem.bookId),
  'bookName': new FormControl(dataItem.bookName, Validators.required),
  'pages': new FormControl(dataItem.pages),
  'publisher': new FormControl(dataItem.publisher),
  'genre': new FormControl(dataItem.genre, Validators.required),
  'authors': new FormArray(dataItem.authors)
});

还开始在html中检查我的值

<ng-template kendoGridCellTemplate let-dataItem>
  <div *ngIf="!dataItem.authors==null">
    {{log(dataItem.authors)}}
    {{log(formGroup.authors)}}
    <ul>
      <li *ngFor="let author of dataItem.authors">
        {{log(author)}}
        <strong>{{author.authorName }}</strong>
      </li>
    </ul>
  </div>
</ng-template>

但是我的dataItem的authors属性总是为null，为什么会发生这种情况？ 网格中的另一列具有正确的值，而不是null。

我找到了很好的示例here，但此示例不支持来自远程服务器的数据。

UPD2：

主要问题在于，我的dataItem（控件）不知道如何从gridData读取我的作者数组。我该如何更改？（dataItem与书籍相同）

  'authors': new FormArray(dataItem.authors)

Angular 2.如何在反应形式中使用formArray

0 个答案: