Question

我有一个“项目选择”屏幕，用户单击与项目相对应的复选框，然后弹出通知确认用户是否要继续进行该项目。现在，我想删除该复选框并创建一个可链接的“项目名称”，以便用户单击“项目名称”，他应该能够继续进行下一页。

这是我的HTML代码。

<div class="main-content">
<div class="container-fluid">
    <div class="row">
        <div class="card">
            <div class="card-header">
                <h5 class="title">Projects</h5></div>
            <mat-toolbar> <span>Project List </span> </mat-toolbar>
            <div>
                <div class="form">
                    <mat-form-field floatPlaceholder="never" color="accent">
                        <input matInput #filter placeholder="Search Project" />
                    </mat-form-field>
                </div>
                <div class="loader" *ngIf="isLoadingResults">
                    <svg class="circular" viewBox="25 25 50 50">
                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="1.5" stroke-miterlimit="10" />
                    </svg>
                </div>
                <div class="row">
                    <div class="col-md-offset-10 text-left">
                        <button mat-icon-button color="primary" matTooltip="Create New Project" (click)="addNew()">
                            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
                        </button>
                    </div>
                </div>
                <mat-table #table [dataSource]="dataSource" matSort class="mat-cell">
                    <!--
                        - Note that these columns can be defined in any order.
                        The actual rendered columns are set as a property on the row definition"
                    -->

                    <!-- ID Column -->

                    <ng-container matColumnDef="id">
                        <mat-header-cell *matHeaderCellDef>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let row">
                             <mat-checkbox
                                (click)="$event.stopPropagation()"
                                [checked]="row.selected"
                                (change)="isSelected(row, $event)"
                            >
                            </mat-checkbox> 
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectName }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="displayName">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Display Name</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectDisplayName }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="description">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectDescription }}</mat-cell>
                    </ng-container>

                    <!-- actions -->
                    <ng-container matColumnDef="actions">
                        <mat-header-cell *matHeaderCellDef>
                        </mat-header-cell>

                        <mat-cell *matCellDef="let row; let i = index">
                            <button mat-icon-button color="accent" matTooltip="Edit" (click)="startEdit(row)">
                                <mat-icon aria-label="Edit">edit</mat-icon>
                            </button>

                            <button mat-icon-button color="#b71c1c" matTooltip="Delete" (click)="deleteItem(row)">
                                <mat-icon aria-label="Delete">delete</mat-icon>
                            </button>
                        </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
                </mat-table>

                <mat-paginator #paginator [length]="dataSource" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
                </mat-paginator>
            </div>
        </div>
    </div>
</div>

这是我使用RouterLink的TypeScript代码

    isSelected(row, $event) {
    if ($event.checked === true) {
        const dialogRef = this.dialog.open(ConfirmDialogComponent, {});
        dialogRef.afterClosed().subscribe(result => {
            if (result === true) {
                this.dataService.setObject('project', JSON.stringify(row));
                this.globalAppSateService.onMessage(row);
                 this.router.navigate(['/metadata']);
            }
        });
        this.columnList.forEach(column => {
            if (row.projectName === column.projectName) {
                column.selected = true;
            } else {
                column.selected = false;
            }
        });
        this.dataSource = new MatTableDataSource<any>(this.columnList);

        this.dataSource
            .connect()
            .subscribe(list => this.columnListChange.emit(list));
        this.dataSource.sort = this.sort;
    }
}

Answer 1

您的HTML代码

 <mat-cell *matCellDef="let row" (click)="proceed()">
                        {{ row.projectName }}</mat-cell
                    >

TS代码

// To open confirmation dialog box 
public proceed() {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {});
dialogRef.afterClosed().subscribe(result => {
        if (result === true) {
            this.dataService.setObject('project', JSON.stringify(row));
            this.globalAppSateService.onMessage(row);
            this.router.navigate(["/metadata"]);
        }
    });
 }

Answer 2

在@Sneha Pawar的帮助下，我通过使其功能得以解决。我更改了html列名

 <mat-cell *matCellDef="let row"(click)="proceed(row, $event)" >
                            {{ row.projectDisplayName }}</mat-cell
                        >

和打字稿

  public proceed(row, $event) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {});
    dialogRef.afterClosed().subscribe(result => {
        if (result === true) {
            this.dataService.setObject("project", JSON.stringify(row));
            this.globalAppSateService.onMessage(row);
            this.router.navigate(["/metadata"]);
        }
    });
}

用户单击项目名称时如何路由到下一页

2 个答案: