Angular 5: Мой ответ не перезаписывает свойство по умолчанию - PullRequest
Новая
       31

Angular 5: Мой ответ не перезаписывает свойство по умолчанию

0 голосов
/ 10 января 2019

Я пытаюсь связать данные в моем представлении html, но мой ответ не перезаписывает значение свойства по умолчанию. От API я получаю хороший ответ.

feedback.statistics.model.ts 

export class FeedbackStatistics {
  overall: number = 0;
  technicalSkills: number = 0;
  communication: number = 0;
  commercial: number = 0;
  leadership: number = 0;
}

reviews.component.ts 

export class ReviewsComponent implements OnInit {

  message = '';

  feedback: FeedbackStatistics = new FeedbackStatistics();

  constructor(
    private profileService: ProfileService
  ) { }

  ngOnInit(): void {

    this.profileService.getUserFeedbackStatistics().subscribe(
        response => {
            this.feedback = response;
        },
        error => {
            this.message = error.error_description;
        }
    );
  }
}

reviews.component.html 

<!-- User Skills -->
<div class="d-flex flex-wrap text-center g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-40">
  <div class="g-mr-40 g-mb-20 g-mb-0--xl" style="margin-left: 17px;">
    <app-counter [from]=0 [to]=feedback.overall [of]=10 [animationTime]="700" [circleColor]="'#d3b6c6'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Overall</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.technicalSkills [of]=10 [animationTime]="700" [circleColor]="'#bee3f7'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Technical Skills</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.communication [of]=10 [animationTime]="700" [circleColor]="'#ffc2bb'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Communication</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.commercial [of]=10 [animationTime]="700" [circleColor]="'#c9ff97'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Commercial Acumen</h4>
  </div>

  <div class="g-mb-20 g-mb-0--lg">
    <app-counter [from]=0 [to]=feedback.leadership [of]=10 [animationTime]="700" [circleColor]="'#eeeeee'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Leadership</h4>
  </div>
</div> <!-- End User Skills -->

profile.service.ts 

    getUserFeedbackStatistics(): Observable<FeedbackStatistics> {
    if (!JSON.parse(localStorage.getItem('authorizationData'))) {
        return Observable.empty<FeedbackStatistics>();
    }

    return this.http.get<FeedbackStatistics>('api/reviews/feedbackStatistics?username=' + JSON.parse(localStorage.getItem('authorizationData')).userName)
    .catch(error => this.handleError(error));
}

Например, если я оставлю это как указано в коде, я получу результат 0 для всех свойств, но если я объявлю так: "feedback: FeedbackStatistics;" Я получаю ответное значение, но у меня есть ошибка, что обратная связь не может быть неопределенной.

Любое предложение приветствуется.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Я думаю, что добавление *ngIf="feedback" к самому внешнему div должно исправить проблему обратной связи: reviews.component.ts 

export class ReviewsComponent implements OnInit {

  message = '';

  feedback: FeedbackStatistics;

  constructor(
    private profileService: ProfileService
  ) { }

  ngOnInit(): void {

    this.profileService.getUserFeedbackStatistics().subscribe(
        response => {
            this.feedback = response;
        },
        error => {
            this.message = error.error_description;
        }
    );
  }
}

reviews.component.html 

<!-- User Skills -->
<div *ngIf="feedback" class="d-flex flex-wrap text-center g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-40">
  <div class="g-mr-40 g-mb-20 g-mb-0--xl" style="margin-left: 17px;">
    <app-counter [from]=0 [to]=feedback.overall [of]=10 [animationTime]="700" [circleColor]="'#d3b6c6'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Overall</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.technicalSkills [of]=10 [animationTime]="700" [circleColor]="'#bee3f7'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Technical Skills</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.communication [of]=10 [animationTime]="700" [circleColor]="'#ffc2bb'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Communication</h4>
  </div>

  <div class="g-mr-40 g-mb-20 g-mb-0--xl">
    <app-counter [from]=0 [to]=feedback.commercial [of]=10 [animationTime]="700" [circleColor]="'#c9ff97'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Commercial Acumen</h4>
  </div>

  <div class="g-mb-20 g-mb-0--lg">
    <app-counter [from]=0 [to]=feedback.leadership [of]=10 [animationTime]="700" [circleColor]="'#eeeeee'" [fontSize]="80"></app-counter>
    <h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Leadership</h4>
  </div>
</div> <!-- End User Skills -->

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

feedback.statistics.model.ts 

export interface FeedbackStatistics {
  overall: number;
  technicalSkills: number;
  communication: number;
  commercial: number;
  leadership: number;
}
0 голосов
/ 10 января 2019

One, конструктор не определен явно, что нормально, я думаю

Во-вторых, вам нужно отобразить ответ на json, если это не было сделано в сервисе angular перед его подпиской.

В-третьих, 

 feedback: FeedbackStatistics = new FeedbackStatistics();

  constructor(private profileService: ProfileService) {
feedback= new FeedbackStatistics();
 }

это должно быть в конструкторе

...