Angular 6 Не удается просмотреть свойство после ответа - PullRequest
Новая
       21

Angular 6 Не удается просмотреть свойство после ответа

0 голосов
/ 12 ноября 2018

Я на самом деле новичок в угловой.Я пытаюсь перебрать свойство внутри файла компонента, но всегда получаю сообщение о том, что свойство legnth не определено.

Снимок экрана Chrome DevTools Console

thisмой компонентный файлЕсли я перебираю свойство комнат из моего HTML-файла с ngFor, это работает отлично, но внутри самого компонента я не могу получить доступ к свойству.Нужна помощь 

import { Component, OnInit, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { AddRoomService } from '../../_services/addroom.service';
import { HttpClient } from '@angular/common/http';
import { NgForm } from '@angular/forms';
import swal from 'sweetalert2';
import { forEach } from '@angular/router/src/utils/collection';

declare var $: any;

declare interface Room {

  name?: string;
  floor?: number;
  maxseats?: number;
  maxcapacity?: number;
  flipchartcount?: number;
  moderationbagcount?: number;
  laptopscount?: number;
  moderationmaterialcount?: number;
}

@Component({
  moduleId: module.id,
  selector: 'addRoom-cmp',
  templateUrl: './add.component.html',
  providers: [NgForm, AddRoomService]
})

export class AddComponent implements OnInit {

  public typeValidation: Room;

  simpleSlider = 0;
  locations: any;
  rooms: any;
  model: any = {};

  constructor(private addRoomService: AddRoomService, private http: HttpClient) {   

  }

  ngOnInit() {

    $('[rel="tooltip"]').tooltip();
    this.typeValidation = {
      name: '',
    }    

  }

  ngAfterViewInit() {    

    this.getHappeningLocations();
    this.getExistingRooms();

    for (let room of this.rooms) {
      console.log(room);
    }      

  }

  getHappeningLocations() {
    this.http.get('https://localhost:44368/api/HappeningLocation/').subscribe(response => {
      this.locations = response;
    }, error => {
      console.log(error);
    });
  }

  getExistingRooms() {
    this.http.get('https://localhost:44368/api/room/getallrooms').subscribe(response => {
      this.rooms = response;      
      //console.log(response);      
    }, error => {
      console.log(error);
    });
  }
}

РЕДАКТИРОВАТЬ:

Я изменил его, как показано ниже, теперь он работает отлично, спасибо за вашу помощь:) 

getHappeningLocations() {
    this.http.get('https://localhost:44368/api/HappeningLocation/').subscribe(response => {
      this.locations = response;
      this.getExistingRooms(response);
    }, error => {
      console.log(error);
    });
  }

  getExistingRooms(locations: any) {
    this.http.get('https://localhost:44368/api/room/getallrooms').subscribe(response => {
      this.rooms = response;

      for (let room of this.rooms) {
        console.log(room);
      }

      for (let loc of locations) {
        console.log(loc);
      }
    }, error => {
      console.log(error);
    });
  }

1 Ответ

0 голосов
/ 12 ноября 2018

Вам нужно установить и затем использовать this.rooms в функции подписки вашей функции getExistingRooms ().В этой функции подписки вы можете передать ее другой функции, если вам нужно больше работать с данными.

Асинхронный характер angular означает, что у вас не настроено this.rooms, когда вы пытаетесь зациклить его, поток просто продолжается, он не ждет ответа http, прежде чем двигаться дальше.Вам нужно работать с ответами в функциях подписки на вызовы http.

Для дальнейшего чтения вы можете проверить 

https://angular.io/guide/observables

Это дает вам представление о том, как подписка на Observables означает, что вы можетеработать с данными, возвращаемыми из http-вызова.

...