在 Angular 11 中使用嵌套循环扩展表格行

如何解决在 Angular 11 中使用嵌套循环扩展表格行

我想显示从 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)">&times;</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'];
    });
}