Squeak.ru - шаблоны программирования

Angular 4+ httpClient лучшая практика использования сервиса

Здравствуйте, я хотел бы знать, как организовать мой код:

У меня простой пользовательский интерфейс:

export interface User {
Account: string;
Name: string;
EMail: string;
PictureURL: string;
Department: string;
JobTitle: string;
Initials: string;
Skype: string;
Office: string;
MobileNumber: string;
DirectLine: string;
IsChecked: boolean;
IsIDTitleOnly: boolean;
ID: string;
CreatedAt: string;
CreatedBy: this;
ModifiedAt: string;
ModifiedBy: this;}

У меня есть простой сервис для получения моих данных:

  getCurrentUser(): Observable<User> {
const serviceUrl: string = environment.apiUrl + 'Users/Current';

return this.http.get(serviceUrl)
.map((res: User) => {
  return res;
});}

И, наконец, простой компонент:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { User } from '../../interfaces/user';
import { UserService } from '../../services/user.service';

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


  constructor(
    private userService: UserService
  ) { }

  ngOnInit() {
    this.getCurrentUser()
  }

  getCurrentUser() {
    this
      .userService
      .getCurrentUser()
      .subscribe(
     res => { console.log(res); this.user = res },
     err => { console.log(err); }
  )
  }
}

У меня нет класса или конструктора для моего пользователя, должен ли я всегда создавать достаточно класса или интерфейса?

Когда я отображаю свое «user.Name», у меня возникает ошибка: «Не удается прочитать свойство« Имя »неопределенного», потому что у пользователя не было времени для восстановления данных.

Мне бы очень хотелось знать, как правильно инициализировать моего пользователя и знать, нужен ли мне класс или нет (если однажды мне придется создать нового пользователя).

Спасибо заранее



Ответы:


1

Предпочтительно иметь интерфейс или класс (форму), описывающий объект. Это одна из основных функций, которые Typescript дает нам, чтобы сделать наш код строго типизированным на своем уровне.

Что касается undefined error, вы можете проверить свое поле при отображении в разметке. Просто добавьте знак ? после поля - user?.Name.

14.11.2017
  • Здравствуйте, спасибо за быстрый ответ, я использую ? но я не могу себе представить положить ? повсюду... и я воспользуюсь возможностью, чтобы расширить свой вопрос, если я нахожусь в компоненте X (/home): я получаю свои данные и иду к компоненту Y (/tmp) (чтобы сделать что-то еще). Когда я возвращаюсь к X каждый раз, когда мне нужно получить свои данные? Я все время делаю this.getCurrentUser()'? 14.11.2017
  • Да нужно. Потому что каждый раз, когда вы покидали компонент и заходили снова, он будет его удалять и создавать заново. Вы можете использовать одноэлементный сервис на высоком уровне, чтобы брать и сохранять пользовательские данные в своих. И после внедрения в ваши компоненты просто получите сохраненные данные 14.11.2017

  • 2

    В вашем html используйте *ngIf вот так:

    <div *ngIf='user'> {{user.Name}}</div> 
    

    Это предотвратит ошибку «Не удается прочитать свойство« Имя »неопределенного»

    07.02.2018
    Новые материалы

    Очистить файлы Program .cache в Ubuntu 20.10
    Очистите кеш за несколько простых шагов! GNU / Linux реализовал эффективное управление хранилищем для своих пользователей. Но заметили ли вы, что в вашей системе Linux заканчивается место,..

    Использование Node.js для чтения действительно больших файлов (часть 1)
    В этом сообщении в блоге есть интересный источник вдохновения. На прошлой неделе кто-то на одном из моих каналов в Slack опубликовал тестовое задание, которое он получил на должность..

    Введение в градиентный спуск и обратное распространение
    Введение в градиентный спуск и обратное распространение Как машинное обучение? Машинное обучение ( ML ) - это исследование компьютерных алгоритмов, которые автоматически улучшаются по..

    Шаблон CQRS — C#
    Этот архитектурный шаблон в основном говорит о том, что мы можем использовать одну модель для операций чтения, а другую — для операций записи. Звучит хорошо, но реализовать его может быть..

    Освоение функций потерь в машинном обучении для регрессии: полное руководство по оптимизации…
    Введение: Функция потерь является важным компонентом алгоритмов машинного обучения и статистических моделей. Его роль заключается в измерении несоответствия между прогнозируемым выходом модели и..

    10 языков программирования, которые изменят мир в 2023 году
    Мир программирования постоянно развивается, и востребованные языки постоянно меняются. Однако есть несколько языков, которые выдержали испытание временем и по-прежнему очень ценны для изучения в..

    Чем заняться в наших библиотеках (апрель 2023 г.)
    В апреле этого года мы празднуем обучение по-разному — от принятия позитивного и устойчивого мышления до понимания и сохранения местных популяций пчел, а также изучения новейших и новейших..