时间戳

首页 > 解决方案 > 角度视图已更新到以前的迭代

angular - 角度视图已更新到以前的迭代

问题描述

更新：

我以某种方式相信问题来自后端。在回调函数中的 user.findbyIdAndUpdate 函数中，变量 user（或 result）正在返回以前的信息，尽管数据库中显示了新的信息（我正在使用 Robo 3t 进行检查）。所以我不知道这里到底发生了什么。

我正在将图片作为头像上传到 nodejs-mongo 服务器。第一次编译项目时似乎可以工作，但是在我第二次尝试更改图片后，它是这样工作的：

上传图片2和图片2预期显示。

上传图片3，图片2留着。（图3应该显示）。

上传图片4，图片3已加载。（图4应该显示）。

它保持这种方式，在屏幕上显示之前上传的图片。

我已经尝试过使用 ngZone 和 observables，正如这里所解释的那样，但行为是相同的。

我的代码：

profile.components.ts

user: any;
userupdater = new BehaviorSubject < string > (this.user);
file2Base64result;
//CODE
async file2Base64(archivo) {
    const file = archivo.target.files[0];
    this.file2Base64result = "";
    this.file2Base64result = await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });

    let user: UserI = {
        id: 0,
        name: "",
        password: "",
        email: "",
        avatar: this.file2Base64result
    };
    this.authService.updateAvatar(user).subscribe(
        res => {

        },
        err => {},
        () => {
            this.user = JSON.parse(localStorage.getItem("currentUser")); //I believe the problem could be here
            this.userupdater.next(this.user);
            Swal.close();
        })
}

profile.component.html 的相关部分 <img class="avatarimage" src="{{ user.avatar }}" />

auth.service.ts


updateAvatar(user: UserI): Observable < JwtResponseI > {
    let currentu = < UserI > JSON.parse(localStorage.getItem("currentUser"));
    /* console.log("currentu: "+JSON.stringify(currentu)); */
    if (user.avatar) currentu.avatar = user.avatar;
    return this.httpClient.post < JwtResponseI > (`${this.AUTH_SERVER}/updateavatar`,
        currentu).pipe(tap(
        (res: JwtResponseI) => {
            if (res) {
                let currentU = {
                    name: res.dataUser.name,
                    email: res.dataUser.email,
                    role: res.dataUser.role,
                    id: res.dataUser.id,
                    avatar: res.dataUser.avatar,
                    signature: res.dataUser.signature
                };
                //guardar token
                this.saveToken(res.dataUser.accessToken, res.dataUser.expiresIn, currentU);
            }
        }, error => {
            console.log(error);
        },
        () => {}
    ));
}

private saveToken(token:string, expiresIn:string, CurrentUser):void{

  this.isLoggedIn = this.token;
  const expiresAt = moment().add(localStorage.getItem('EXPIRES_IN'),'second');
  localStorage.removeItem("ACCESS_TOKEN");
  localStorage.removeItem("EXPIRES_IN");
  localStorage.removeItem("currentUser");
  localStorage.setItem("ACCESS_TOKEN", token);
  localStorage.setItem("EXPIRES_IN", JSON.stringify(expiresAt.valueOf()));
  this.token = token;
  this.expiresin = JSON.stringify(expiresAt.valueOf());
  localStorage.setItem("currentUser", JSON.stringify(CurrentUser));

  this.token = token;
}

在后端，相关代码：

exports.updateavatar = (req, res, next) => {
    /* console.log("request:xxxxxxxxxx "+JSON.stringify(req.body)); */
    console.log("request:id " + JSON.stringify(req.body.id));

    var ObjectId = require('mongoose').Types.ObjectId;
    var elementid = new ObjectId(req.body.id);

    User.findByIdAndUpdate({
        _id: elementid
    }, {
        $set: req.body
    }, (err, user) => {
        if (err) {
            console.log("Error en findByIdandUpdate: " + err);
            return res.status(500).send('No se encuentra el usuario.');
        }
        if (!user) {
            res.status(409).send({
                message: 'Esta ID de usuario no existe.'
            });
        } else {
            const expiresIn = 14 * 60 * 60;
            const accessToken = jwt.sign({
                    id: user.id
                },
                SECRET_KEY, {
                    expiresIn: expiresIn
                });
            const dataUser = {
                id: user.id,
                name: user.name,
                email: user.email,
                accessToken: accessToken,
                expiresIn: expiresIn,
                role: user.role,
                avatar: user.avatar,
                signature: user.signature
            }
            res.send({
                dataUser
            });
        }
    });
}

exports.createUser = (req, res, next) => {
    console.log("request:xxxxxxxxxx " + JSON.stringify(req.body));
    const newUser = {
        name: req.body.name,
        email: req.body.email,
        password: bcrypt.hashSync(req.body.password),
        role: req.body.role,
        avatar: req.body.avatar,
        signature: req.body.signature
    }

    User.create(newUser, (err, user) => {
        if (err && err.code === 11000) {
            return res.status(409).send("El email ya está en uso.");
        }
        if (err) {
            console.log(err);
            return res.status(500).send("No se ha podido crear el usuario");
        }
        const expiresIn = 14 * 60 * 60;
        const accessToken = jwt.sign({
                id: user.id
            },
            SECRET_KEY, {
                expiresIn: expiresIn
            });
        const dataUser = {
            id: user.id,
            name: user.name,
            email: user.email,
            accessToken: accessToken,
            expiresIn: expiresIn,
            role: user.role,
            avatar: user.avatar,
            signature: user.signature
        }
        //response
        res.send({
            dataUser
        })
    })
}

标签： angularview

解决方案

mongo 函数 findbyIdandupdated 需要一个像 {new:true} 这样的参数，所以它返回更新的对象。否则返回前一个。

推荐阅读