How to Detect changed data immediately in angular web page

Question

This is my angular html code.

 <tr *ngFor="let asset of myRequestResumeList">


            <td class="asset-properties">{{asset.userId}}</td>

            <td class="asset-properties">{{asset.requestDetails}}</td>

            <td class="asset-properties">{{asset.requestResumeAssetId}}</td>
            <td>
              <form>

                <div>
                  <button (click)="updateAuthentication(asset.userId, asset.requestDetails, asset.requestResumeAssetId, '인증' );" type="submit">승인</button>
                  <button (click)="revokeRequestUser(asset.requestResumeAssetId);" type="submit">거부</button>
                </div>
              </form>
            </td>


          </tr>

when button(updateAuthentication) is clicked, asset matched asset.userId is deleted from myRequestResumeList.

updateAuthentication function is completed.

but deleted asset is Remain in angular page.

I want to see changed page without webrowser refresh button.

I study about ChangeData(Ng zone) but It's to hard to me. I don't know how to apply Ng zone to my code.

please give me advice(easy way) to see changed page immediately

Answer 1

Add *ngIf="asset.userId"

<td class="asset-properties" *ngIf="asset.userId">{{asset.userId}}</td>

But adding ngIf on td will break your table , so use a span inside td , like <td><span *ngIf="asset.userId"> {{asset.userId}}</span></td>

EDIT

The problem was that OP was not receiving the updated object in response from the server, so that resulted in view not getting updated.