Question

使用Angular 7开发列表/详细信息表格在很大程度上完成了角度动态表单教程

我想单击表中的一行并填充子对象。

以这种方式建立页面

getDouble()

我能够单击一行，并显示详细信息，并获取数据对象。我可以在标头部分使用{{}}表示法来证明它是有效的

FieldGroup从dataService返回，并且ngFor正确显示空控件...

我不知道现在如何使用patchValue（或其他方式）填充带有数据对象的控件？

*）我似乎无法正确地“抓住” listComponent.ts中的detailComponent，因此我可以调用方法...

*）FieldGroup人口处于上升状态，所以我必须等待

点击列表中的行后，我该如何使用FIELDGROUP？

（不确定我的问题是否清楚陈述。我会退后一步，不久再回来。与此同时...请随时提出澄清问题...）

这是documentList的摘录

documentListComponent   <! clicking on this should pop the detail >
documentDetailComponent   <! the detail has some header info and >=1 input fields>
     |- oneFieldDisplayComponent

我的细节课的摘录在这里

  <table>
          <thead>
            <tr>
              <td>Ver#</td>
              <td>Ver Name</td>
              <td>Locked</td>
            </tr>
          </thead>
          <tbody>
        <tr    *ngFor="let pa of paVers;index as idx"  (click)="onRowClicked($event, pa)" >
          <td style="width:15px;">{{pa.version}}</td>
          <td style="width:200px;">{{pa.versionName}}</td>
          <!--<td>{{pa | json}}</td>-->
        </tr>
      </tbody>
    </table>
    <div style="padding-bottom:10px;">

      <div *ngIf="selectedpaVer" >show me</div>
      <app-property-analysis-detail *ngIf="selectedpaVer"
                                    [detailFormGroup]="listFormGroup"
                                    [paVer]="selectedpaVer" formControlName="detail" ></app-property-analysis-detail>

    </div>

Answer 1

答案是“学习如何引用子控件”，然后在子控件上调用方法。

除了@input（）方法之外，此页面还提供了3个关于如何促进组件间通信的好主意。没有一个能真正解决我的问题……但是它们是三个可行的好主意。 https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

我意识到必须有一种方法可以直接用角度引用其他组件。我找到了有关@ViewComponent的文章 https://alligator.io/angular/viewchild-access-component/

此页面是有关使用@ViewComponent的很好的文章，并通过3个不同的示例进行工作。非常说明。辛苦了 https://www.concretepage.com/angular-2/angular-2-viewchild-example

最终的答案是更改listcomponent，以便它具有对child detailcomponent的引用。可以使用@ViewComponent装饰器，如下所示

export class propertyAnalysisListComponent implements OnInit, AfterViewInit{

  listFormGroup: FormGroup; 
  paVers: propertyAnalysisVersion[];
  selectedpaVer: propertyAnalysisVersion;

  @ViewChild(propertyAnalysisDetailComponent)
  private myDetail: propertyAnalysisDetailComponent;

重要的是要注意（让我有些困惑），最后两行实际上是1行。

正在使用@ViewChild修饰声明/类型。

详细信息组件现在可以在documentList组件的tr.click方法中寻址

  onRowClicked(evt: MouseEvent, paVer: propertyAnalysisVersion) {
    //alert(paVer.versionName);
    this.selectedpaVer = paVer;
    this.myDetail.patchControls(paVer);  //set control values w/ the new data object
  }
}

希望这对其他人有帮助。

角7填充子对象

1 个答案: