Question

我们正在为一个网站开发cms，因为我已经在数据表中列出了所有帖子我希望在用户点击删除按钮时删除该帖子

我已经调用了我的服务，该按钮行从数据库中被删除但是在前端它没有加载lattes结果而我的模态没有关闭请看下面的图片，当我点击删除按钮模态出现时

当我点击是，删除按钮我已经调用了服务，从数据库中删除了它的工作正常，我面临的是模态没有关闭，该表没有重新加载其数据，

我想知道有没有办法刷新角度5中的特定组件？或者我该如何处理这个

如果您需要我方的任何意见，请告诉我，

请给我你宝贵的建议

所有事情现在都在运作我只是遇到一个小问题，我的模态没有关闭按钮点击

关注我的代码

 <div class="example-header">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">

    <mat-table [dataSource]="dataSource" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="post_title">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Title </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.post_title}} </mat-cell>
        </ng-container>
<!-- 
        <ng-container matColumnDef="post_description">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Description </mat-header-cell>
            <mat-cell *matCellDef="let row" [innerHTML]="row.post_description"></mat-cell>
        </ng-container> -->

        <!-- Progress Column -->
        <ng-container matColumnDef="category_title">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Category </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.category_title}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Status </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.status}} </mat-cell>
        </ng-container>

        <!-- Color Column -->
        <ng-container matColumnDef="location">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Post Location </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.location}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="buttons">
            <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-button [routerLink]="['../update-post/',row.post_id]">
                    <mat-icon>edit</mat-icon>
                </button>
                 <button mat-button (click)="open(content)">
                    <mat-icon>delete</mat-icon>
                </button>
                <ng-template #content let-c="close" let-d="dismiss">
                        <div class="modal-header">
                          <h4 class="modal-title">Confirm</h4>
                          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <p>Are you sure you want to delete the post?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-dark"  data-dismiss="modal"  (click)="deletePost(row.post_id)">Yes, Delete</button>
                            <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">No</button>
                        </div>
                      </ng-template>
            </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 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Answer 1

当我们调用删除记录服务时，在按钮事件中单击

成功删除成功后，您可以在下面编写代码来隐藏模型弹出窗口。

$（ '＃myModal'）模态（ '显示'）。 // #myModal是你模特的id

然后调用绑定网格的方法我希望它对你有用

单击按钮上的关闭模式

1 个答案: