单击按钮时关闭模式

Question

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

我已经在那个按钮行上调用了我的服务，从数据库中删除了但在前端它没有加载拿铁咖啡结果并且我的模式没有关闭 请看下面的图片， 当我点击删除按钮时出现模态

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

我想知道有没有办法刷新 Angular 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').modal('show'); //#myModal 是你的模型的 ID

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