Question

在前端使用一个简单的angular5应用程序，我想对配置文件进行编辑当用户想要的时候，所以我有一个与组件ParametresComponent相关的按钮设置。

我首先要做的是使用getUserInfo（）函数显示用户信息，此后，当用户完成对帐户的修改后，他可以保存更改（他只能更改“电话”和“密码”）。 / p>

所以我有一个类Model User.ts：

const styles = {
    root: {
        flexGrow: 1,
        padding: 10,
        margin: 10
    },
    flex: {
        flex: 1,
    },
    input: {
        marginRight: 10
    },
    select: {
        marginRight: 10
    },
    paperContainer: { margin: "10px", overflowX: "auto" }
}

parametreComponent.component.ts

mydf %>% 
  rename("col1" = x, "col2" = y) %>% 
  mutate(year = paste0(year, "-01-01")) %>% 
  mutate(year = as.Date(year)) %>% 
  ggplot() + 
  geom_line(aes(x = year, y = col1), color = "red", size = 2) + 
  geom_line(aes(x = year, y = col2), color = "blue", size = 2) +
  theme_minimal()

和parametres.Component.html：

export class  User{

  id:number;
  username:string;
  password:string;
  prenom:string;
  nom:string;
  tel:string;
  cin:string ;

  setId(value: number) {
    this.id = value;
  }

  setUsername(value: string) {
    this.username = value;
  }

  setPassword(value: string) {
    this.password = value;
  }

  setPrenom(value: string) {
    this.prenom = value;
  }

  setNom(value: string) {
    this.nom = value;
  }

  setTel(value: string) {
    this.tel = value;
  }

  setCin(value: string) {
    this.cin = value;
  }



}

问题是保存时出现此错误：

import { Component, OnInit } from '@angular/core';
    import * as _swal from 'sweetalert';
    import { SweetAlert } from 'sweetalert/typings/core';
    import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
    import {ActivatedRoute, Router} from '@angular/router';
    import {User} from '../Admin/Models/User';
    import {Devloppeur} from '../Admin/Models/Devloppeur';
    import {DevloppeurService} from '../../../service/devloppeur.service';
    import {ClientService} from '../../../service/client.service';
    import {AuthenticationService} from '../../../service/authentication.service';
    const swal: SweetAlert = _swal as any;

    function passwordMatch(control: AbstractControl):{[key: string]: boolean}{

      const password = control.get('password');
      const Confirmationpassword = control.get('Confirmationpassword');

      if( !password || !Confirmationpassword) {
        return null; }

      if(password.value === Confirmationpassword.value){
        return null;
      }

      return {
        mismatch:true
      }

    }

    @Component({
      selector: 'app-parametres',
      templateUrl: './parametres.component.html',
      styleUrls: ['./parametres.component.scss']
    })
    export class ParametresComponent implements OnInit {

      form: FormGroup;
      user:User  = new User();
      id:number;
      constructor(private formBuilder: FormBuilder,
                  public router:Router,
                  private authService:AuthenticationService,
                  public activatedRoute:ActivatedRoute,
                  private devService:DevloppeurService,
                  private clientServ:ClientService) { }

      ngOnInit() {
        this.id = this.authService.getAuthenticatedUserId();
        this.getUserInfo();

        this.form = this.formBuilder.group({
          prenom: [''] ,
          nom: [''],
          tel: ['', Validators.required],
          cin: [''],
          username : [''],
          passwordG: this.formBuilder.group({
            password: ['',[Validators.required,Validators.minLength(9)]],
            Confirmationpassword : ['',[Validators.required,Validators.minLength(9)]]

          }, {validator: passwordMatch})

        });
      }

      getUserInfo(){
        this.clientServ.getUser(this.id)
          .subscribe((data:any)=>{
            this.user = data;
          },err=>{
            console.log('there is an error lady ! ');
          })

      }


      SaveEditUser(){
        this.user.setPassword(this.form.value.passwordG.password);
        this.user.setTel(this.form.value.tel);


        this.devService.saveUser(this.user)
          .subscribe((data:User)=>{
            swal("operation réussi !", "Great edited with success !", "success");
            this.router.navigate([ '/profil' ], { relativeTo: this.activatedRoute });
          },err=>{
            console.log(err);
          })
      }


    }

我无法理解为什么出现此错误？任何想法？

Answer 1

尝试将所有方法的访问说明设为公开，

public setPassword(value: string) {
    this.password = value;
}

Answer 2

我有两个建议：
1）尝试在User中添加一个构造函数。
2）在getUserInfo（）中，尝试将对象另存为用户类型

getUserInfo(){
        this.clientServ.getUser(this.id)
          .subscribe((data:any)=>{
            this.user = data; // <-- this.user = data as User;
          },err=>{
            console.log('there is an error lady ! ');
          })
      }

Answer 3

您正在将从API获得的对象分配给CREATE TABLE jhon_and_jack AS SELECT (SELECT count(names) FROM table_team WHERE names = 'jhon') namejhon, (SELECT count(names) FROM table_team WHERE names = 'jack') namejack;对象。这意味着您的新用户对象不再是this.user类型，因为您无法在从API接收的对象上传递方法。如果希望将来自API的对象分配给User，则必须保留原始的this.user，它调用了this.user（从而在对象的原型上创建方法）。为此，您应该分配API对象的属性，而不是对象本身：

new User

错误TypeError：this.user.setPassword不是角度5中的函数吗？

3 个答案: