Question

我使用ngFor在UI中显示任务列表。

当我点击下面的编辑时，如何将数据传递到另一个页面。它必须传递与单击“编辑”按钮的数据卡相对应的数据。

<div *ngFor="#task of tasks">
    <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
        <h2 class="mdl-card__title-text">{{task.taskname}}</h2>
    </div>
    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
        {{task.taskdesc}}
    </div>
    <div class="mdl-card__actions mdl-card--border">                
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a>
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Mark Completed</a>
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">EDIT</a>
    </div>
</div>

Answer 1

如果要在点击某个按钮时将数据传递到另一个页面，而不是先使用路由，则将所需数据作为在这样的路由时Bind Variable "o_curr_blnc" is NOT DECLARED anonymous block completed： -

RouterParams

而不是在接收端使用<div *ngFor="#task of tasks"> <div class="mdl-card__title mdl-card--expand mdl-color--teal-300"> <h2 class="mdl-card__title-text">{{task.taskname}}</h2> </div> <div class="mdl-card__supporting-text mdl-color-text--grey-600"> {{task.taskdesc}} </div> <div class="mdl-card__actions mdl-card--border"> <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a> <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Mark Completed</a> <a [routerLink]="['/Edittask', {data: task.taskname}]" class="mdl-button mdl-js-button mdl-js-ripple-effect">EDIT</a> </div> </div>来获取您在按钮单击时发送的值。有关RouteParams的更多信息，请参阅此处。

https://angular.io/docs/js/latest/api/router/RouteParams-class.html

Working Example of ROuting with Params

Angular2在点击按钮时将数据传递给另一个组件

1 个答案: