Question

当我单击更新按钮时，代码可以成功工作，数据得到更改，但是我必须刷新页面才能查看更改。

我可以用这段代码做什么，以便在我点击后立即输入名字和姓氏更改，而无需手动刷新页面。

个人资料组件html

    <h3 class="profile-username text-center">{{userDetail.first_name}} {{userDetail.last_name}}</h3>

    //update profile form

    <form method="post" [formGroup]="updateForm" (ngSubmit)="onSubmit()">
          <div class="form-group">
              <input type="text" name="first_name" formControlName="first_name" placeholder="First Name">
              </div>
              <div class="form-group">
              <input type="text" name="last_name" formControlName="last_name" placeholder="First Name">
         </div>
    <button>Update<button>

打字稿文件

export class MyProfileComponent implements OnInit {

//data comes from api with the help of resolver
    constructor(private activeRoute: ActivatedRoute, private router: Router, private formBuilder: FormBuilder, private auth: AuthService) {
                      activeRoute.data.subscribe((data)=> {
                      this.userDetail = data.key.data;
                    })

//update profile input fields is initialized with the relevant details

ngOnInit() {
   this.updateForm = this.formBuilder.group({
        first_name: [this.userDetail.first_name],
        last_name: [this.userDetail.last_name],
    //api updates the profile on submit
 }

 onSubmit() {
     this.auth.updateUser(this.updateForm.value).subscribe((res)=>{
               console.log(res);
          },(err)=>{
               console.log(err);
          }); 
 }

身份验证服务文件

//Get User Profile
getUserProfile() {
    return this.http.post(this.userProfileApi, null);
}
//Update User
updateUser(user: any) {
    return this.http.post(this.updateUserDetailsApiUrl, user);
}

获取个人资料数据（我的个人资料组件中的this.userDetail的解析器服务）

constructor(private http: HttpClient, private auth: AuthService) { }

resolve(route: ActivatedRouteSnapshot) {
      if(localStorage.getItem('access_token')){
         return this.auth.getUserProfile();
      }

路由

{ 
    path: 'dashboard', 
    canActivate: [AuthGuard], 
    resolve: {"key": ProfileDetailsResolverService}, 
    children: [
        {
             path: '',
             component: DashboardComponent,
        },
        {
            path: 'my-profile', 
            component: MyProfileComponent
        },
    ]
}

Answer 1

为什么路由使用userData？我的建议：

1st）将userData存储在AuthService中。在http方法的回调中分配值。为什么获取个人资料甚至是帖子？

userData: UserData;
loadUserProfile() {
  return this.http.get(this.userProfileApi).subscribe(profile => this.userData = profile);
}

2nd）在任何需要该个人资料的地方，都将其包含在get

中

get userData(): UserData {
  return this.auth.userData;
}

3rd）我假设您出于任何路由目的将数据存储在路由器中。要确定用户是否可以访问特定路由，请创建实现CanActivate的服务并调整您的应用程序路由。

{ path: 'myroute', component: TargetComponent, CanActivate: [YourGuard]}

-

export class YourGuard implements CanActivate {

  constructor(
    private authService: AuthService,
  ) { }

  canActivate(route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): boolean {

    return /*your condition*/;
  }
}

4th）更新用户时，再次在回调中更改AuthService中存储的userData。

Answer 2

有两种方法可以做到这一点。

首先：您可以将所有数据放在列表中，然后传递到HTML。因此，当您添加新数据时，可以直接在列表中添加位置，然后可以看到更改。 [注意：您需要一个事件来做到这一点]

let newObj = [firstName: 'abc', lastName: 'def']; 
this.dataList.splice(0, 0, newObj);

第二：使用ChangeDetectorRef

  constructor(chngRef: ChangeDetectorRef) {
    super(chngRef);
    setInterval(() => {
      this.chngRef.detectChanges()
    }, 4000)
  }

它将在一段时间后进行检查并加载数据而不刷新页面。

还请检查此URL，因为还有其他方法可以做到这一点。

如何自动更新HTML页面上的详细信息而无需刷新

2 个答案: