问题描述
我想显示从 API 接收并存储在 allproject 中的所有项目。
当我单击行数据显示完美时,当我单击两行中重复的另一行数据时。我需要显示特定的行数据。当我单击任何行时,其他行数据会自动隐藏。并展示具体项目。
查看
<ng-template #content>
<div *ngFor="let data of Allgoals ;let i = index">
<div class='category-filter p-0' *ngIf="data?.user_goal_type == selected_Categoty">
<div class="form-group goals-form success-border " (click)="ClickedRow(data,i)"
[class.active]="i == HighlightRow">
<input #myInput type="text" class="form-control" name="" [(ngModel)]="data.user_goal_title"
placeholder="Write here...">
<div class="goal-inp-btns">
<mat-form-field class="date-size">
<input matInput [matDatepicker]="picker" (dateInput)="addEvent($event)"
class="date-size" (dateChange)="addEvent($event)"
[(ngModel)]="data.editmode? data.user_goal_current_deadline:data.user_goal_current_deadline">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<ng-container *ngIf="data.user_goal_id==''; else update">
<button class="btn btn-success"
(click)="addgoal(data,i)">{{data.editmode? 'update':'Done'}}</button>
</ng-container>
<ng-template #update>
<button class="btn btn-success" (click)="addgoal(data,i)"
*ngIf="data.editmode">update</button>
</ng-template>
<!-- <button class="btn btn-link" (click)="removegoal(data.user_goal_id)">×</button> -->
<!-- <div class="dropdown"> -->
<button class="three-dots" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a *ngIf="data.user_goal_id!=''" class="dropdown-item"
(click)="updategoal(data,i)">Edit</a>
<a class="dropdown-item" (click)="removegoal(data.user_goal_id)">Delete</a>
<!-- <a class="dropdown-item" href="#">Something else here</a> -->
</div>
<!-- </div> -->
</div>
</div>
</div>
<table class="table" >
<tbody cdkDropList (cdkDropListDropped)="onDrop($event)">
<tr *ngFor="let item of allprojects let i=index" cdkDrag cdkDragLockAxis="y">
<td (dblclick)="enabledit(item,true)" (keyup.enter)="updatetodo(item,false)">
<p *ngIf="!item?.editable">{{ item?.user_project_title }}</p>
<input #myInput *ngIf="item?.editable " type="text"
[(ngModel)]="item.user_project_title" placeholder="Enter project" />
</td>
<td class="text-right">
<button class="btn btn-default">
<em class="fa fa-lightbulb-o"></em> Daily Goals
</button>
</td>
<td>
<div class="drag-handle" cdkDragHandle>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr>
<td>
<p style="color: green;" (click)="createproject()">Add project</p>
</td>
<td class="text-right">
<button class="btn btn-default">
<em class="fa fa-lightbulb-o" (click)="createproject()"></em> Add Project
</button>
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
控制者
ClickedRow(data: any,index: number) {
this.allprojects = []
this.HighlightRow = index;
this.commonService.getProjectbygoalid(data.user_goal_id).subscribe(res => {
this.allprojects = res['data'];
});
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)