事件触发器上的组件加载

Question

我的用例-

/ view route-调用视图组件，该组件可在浏览器中迭代地进行服务调用和randers html格式的订单项。 - 没有问题。 此外，每个订单项都将具有“编辑”按钮/链接，这将通过加载自定义构建编辑组件来使用户仅通过某种方式利用该按钮来编辑订单项（“编辑”组件具有一个包含一个tinymice编辑器的表单以及一些带有“提交”按钮的表单组件） 。 用户单击“编辑”链接后，订单项应可以使用相应的编辑组件实例进行编辑，并通过保存需要用最新更改来更新视图，而无需删除编辑组件。 每个订单项每次都会发生这种情况。

对我来说，似乎是在编辑链接的单击事件中动态创建和加载/链接编辑组件，但不确定（我想这可能是棘手和复杂的），在Angular 4中应该是正确的方法。 。

Answer 1

您可以使用input textbox和布尔标志editMode轻松实现此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>

现场演示