Question

我的用例 -

/ view route - 在浏览器中迭代地进行服务调用和randers html格式化行项目的调用视图组件。 - 没有问题。进一步，每个订单项都有编辑按钮/链接，利用用户只能通过加载自定义构建编辑组件来编辑订单项（编辑组件有一个包含一个tinymice编辑器的表单和一些带有提交按钮的其他表单组件）。一旦用户单击编辑链接，就可以使用编辑组件的相应实例编辑行项目，并通过保存需要更新视图以及最新更改和编辑组件需要消失。每次对每个订单项都会发生此行为。

对我来说似乎是在编辑链接的点击事件中动态创建和加载/链接编辑组件但不确定（我猜这可能是棘手和复杂的） - 在角度4中实现这一点的正确方法应该是什么。提前致谢。

Answer 1

您可以使用input textbox和布尔标志editMode

轻松实现此目的

<tr *ngFor="let user of users">
    <td>
    <span *ngIf="user.editMode then editFirstName  else labelFirstName"> </span>
    <ng-template #labelFirstName>{{user.first_name}}  </ng-template>
    <ng-template #editFirstName>
        <input type="text" [(ngModel)]="user.first_name"/>
    </ng-template>
    </td>
    <td>{{user.last_name}}</td>
    <td> 

    <button *ngIf="!user.editMode" (click)="user.editMode=true"> Edit</button>
    <button *ngIf="user.editMode" (click)="saveClicked(user)"> save</button>
    </td>
</tr>

<强> LIVE DEMO

事件触发器上的组件加载

1 个答案: