* ngIf создает бесконечное l oop и никогда не разрешается

Question

Я работаю в angular и хочу отображать определенную форму, только если определенные значения совпадают. У меня есть работающий и проверенный маршрут с почтальоном. Вот мой код

Цитата Angular Компонент HTML

<div *ngIf="canEdit()">
    ...
</div>

Это ^ в настоящее время единственная вещь, вызывающая функцию

Blockquote Angular Файл TS

  canEdit() {
let username = this.currentUser.user.username;
let values = {
  "_id": this.org._id,
  "user": username
}
return this.http.post<any>('http://localhost:3001/users/compareUser', values, { withCredentials: true }).subscribe(
    result => {
      if (result.message == "All good!") {
        console.log(result);
        return true;
      } else {
        return false;
      }
    }
  )

Так что это две части, в настоящее время, если я запусту это, это приведет к бесконечному l oop, console.log (результат), который отображает {результат: "Все хорошо!"} Я также поделюсь своим внутренним маршрутом, который равен express. Забавно, если я просто заменю функцию canEdit (), чтобы она возвращала true, и, возможно, console.log, на какой-нибудь текст, чтобы увидеть, сколько раз он вызывается, он вызывается только один раз. Однако с кодом, которым я поделился (TS), он никогда даже не распознает возвращаемое значение true, которое находится ниже console.log (result).

Express route

    router.post("/compareUser", function(req, res, next) {
  let token = req.cookies.token;
  let id = req.body._id;
  let user = req.body.user;
  if (token) {
    Org.findById(id, (err, result) => {
      if (err) {
        console.log(err);
        return res.status(401).json({
          message: "Could not find Organization"
        });
      } else {
        User.findOne({ username: user }).then(user => {
          if (!user) {
            return res.status(401).json({
              message: "Are you sure you exist?"
            });
          } else {
            if (user.username == result.username) {
              return res.status(200).json({
                message: "All good!"
              });
            }
          }
        });
      }
    });
  } else {
    return res.status(404).json({
      message: "You must be logged in"
    });
  }
});

Answer 1

Другой подход (*) - вернуть само наблюдаемое и использовать | asyn c

canEdit() {
   let username = this.currentUser.user.username;
   let values = {
      "_id": this.org._id,
      "user": username
   }
    //see that return an observable
    return this.http.post<any>('http://localhost:3001/users/compareUser', values, { withCredentials: true })
    //we use map to transform the response in a true/false
    .pipe(map(result=>{
        return result.message=="All good!"?true:false
    })
}

и

<div *ngIf="canEdit()|async">
    ...
</div>

(*) Дополнительный ответ Льва

Answer 2

Вы возвращаете подписку в методе canEdit (), а не в виде логического значения. Вы можете решить эту проблему, добавив переменную в класс компонента и используя ее вместо метода:

valid = false;

ngOnInit() {
 this.canEdit();
}

 canEdit() {
let username = this.currentUser.user.username;
let values = {
  "_id": this.org._id,
  "user": username
}
this.http.post<any>('http://localhost:3001/users/compareUser', values, { withCredentials: true }).subscribe(
    result => {
      if (result.message == "All good!") {
        console.log(result);
        this.valid = true;
      } else {
        this.valid = false;
      }
    }
  )
}

и в вашем шаблоне:

<div *ngIf="valid"></div>