Как разрешить угловому интерфейсу ждать экспресс-ответа REST-Call - PullRequest
Новая
       6

Как разрешить угловому интерфейсу ждать экспресс-ответа REST-Call

0 голосов
/ 11 февраля 2019

Я хочу сделать REST-вызов, когда я инициирую мой пользовательский компонент, чтобы он показывал пользовательский профиль при загрузке.Это прекрасно работает, компонент вызывает сервис, который вызывает мой экспресс-бэкэнд, который, в свою очередь, вызывает REST-API, который возвращает профиль пользователя.Затем обновляется внешний интерфейс.

Однако я получаю ошибку javascript, потому что внешний интерфейс пытается использовать user.id ранее в html-шаблоне пользовательских компонентов перед отправкой данных: 

UserComponent.html:2 ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (UserComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458)
    at checkAndUpdateView (core.js:19833)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)
    at callViewAction (core.js:20069)

Я попытался обойти это поведение, добавив значения по умолчанию, которые я хочу использовать, пока пользователь загружается. Вот мой HTML: 

<ul>
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>

Вот здесь component.ts 

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: User;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUser().subscribe(user => {
      console.log('myUser: ' + JSON.stringify(user));
      this.user = user;
    });
  }

}

service.ts 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';

import { User } from '../classes/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {  }

  getUser(): Observable<User> {
    return this.http.get<any>('/api/userprofile');
  }
}

и код сервера 

router.get('/userprofile', (req, res) => {
  axios.get('https://somerestapi', {auth: {username: 'authuser', password: 'authuserpw'}})
    .then(response => {
      res.status(200).json(response.data)
    })
    .catch(error => {
      res.status(500).send(error);
    })
})

Заранее спасибо!

Ответы [ 4 ]

0 голосов
/ 11 февраля 2019

Попробуйте использовать приведенный ниже фрагмент HTML: 

<ul>
  <li>id: {{user?.id}}</li>
  <li>name: {{user?.firstName}} {{user?.lastName}}</li>
  <li>mail: {{user?.email}}</li>
</ul>

Или 

  <ul *ngIf="user.length >0">
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>
0 голосов
/ 11 февраля 2019

Попробуйте проверить длину user массива 

<ul *ngIf="user.length >0">
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>
0 голосов
/ 11 февраля 2019 
<ul *ngIf="user">
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>

Вы можете вызвать функцию внутри ngOnInit, как показано ниже 

 ngOnInit() {
    this.userService.getUser().subscribe(user => {
      console.log('myUser: ' + JSON.stringify(user));
      this.assignUser(this.user) ;
    });
  }
  //function to assinging user value
      assignUser(user){
      this.user= user;
      }
0 голосов
/ 11 февраля 2019

Либо поместите * ngIf = "user" в элемент ul.Или ставьте вопросительный знак после каждого user в html.<li>id: {{user?.id}}</li>

...