Angular 2 table修改当前数据时如何设置form builder或form group，不知道routerlink怎么用？

Question

   <tr *ngFor="let row of categories ">
    <td>{{row.categoryName}}</td>

    <td>{{row.visible}}</td>
    <td>{{row.instanceNumber}}</td>
    <td> <a class="btn btn-info btn-fill " [routerLink]="['/control/category']">Modify</a>
    </td>

这里我想连同路由一起发送 row/category 对象，但我被重定向到一个空表单！我想将当前行数据映射到原始表单，这样我就可以只修改部分字段而不是全部。

我在 angular!

中使用 formbuilder

ngOnInit() {
    this.relationForm = this.fb.group({
      relationName: ['', [Validators.required, Validators.minLength(3), Validators.pattern('[a-z]+([A-Z][a-z]*)*')  ]],
      humanFormat: ['', [Validators.required, Validators.minLength(3)]],
      populate: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      visible: ['', [Validators.required, Validators.pattern('TRUE|FALSE')]],
      generalizations: ['', [Validators.required, Validators.minLength(3),Validators.pattern('[a-z]+([A-Z][a-z]*)*') ]],

我知道我必须使用这样的东西，但问题在哪里以及如何使用！

 this.productForm.patchValue({
            productName: this.product.productName,
            productCode: this.product.productCode,
            starRating: this.product.starRating,
            description: this.product.description
        });
        this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

Answer 1

这是您的代码的简化示例。在您迭代数据的地方，有一个点击事件，您可以在其中传递所选项目，如下所示：

<div *ngFor="let relation of relations">
 {{relation.categoryName}} 
 <button (click)="modify(relation)">Modify</button>
</div>

然后在您的点击事件中，让我们在导航前将所选项目存储在服务中，以便我们可以在导航后获取它：

modify(relation) {
  this.service.addRelation(relation);
  this.router.navigate(['your path here'])
}

有了上面的，我们还需要在构造函数中注入Router才能使用：private router: Router.

我不打算完全解释该服务，official docs about this. The point is to use an observable, in this case we need something else than a Subject as Subject requires next() to emit values, whereas BehaviorSubject will always emit if there is a subscriber, more here in this .

中有详细说明

服务：

private relation = new BehaviorSubject<Object>({})

relation$ = this.relation.asObservable()

addRelation(relation) {
  this.relation.next(relation)
}

然后在您拥有表单的其他组件中，订阅服务中的可观察对象，然后根据您获得的值构建您的表单：

constructor(private service: RelationService, private fb: FormBuilder) {
  service.relation$.subscribe(relation => {
    this.relation = relation;
    this.buildForm();
  });
}

然后您只需使用收到的对象填写表单中的值：

buildForm() {
  this.relationForm = this.fb.group({
    categoryName: [this.relation.categoryName],
    author: [this.relation.author]
  });
}

所以这是一个简化的示例，您可以使用并适应您自己的代码！

最后，这里有一个 DEMO 可以玩。

Angular 2 table修改当前数据时如何设置form builder或form group，不知道routerlink怎么用？

Angular 2 How to set form builder or form group when we modify the current data in table, not sure how to use routerlink?

javascript

forms

formbuilder

typescript

angular