ОШИБКА TypeError: Невозможно прочитать свойство 'temp' из неопределенного в Object.eval [как updateRenderer] (SearchCitiesComponent. html: 21)

Question

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatGridListModule } from '@angular/material/grid-list';
import { RouterModule, Routes } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatListModule } from '@angular/material/list';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';


import 'hammerjs';
import { HeaderComponent } from './header/header.component';
import { MatSidenavModule } from '@angular/material/sidenav';
import { SearchCitiesComponent } from './search-cities/search-cities.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { AddcityComponent } from './addcity/addcity.component';
import { DetailsComponent } from './details/details.component';

import { environment } from 'src/environments/environment';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SearchCitiesComponent,
    AddcityComponent,
    DetailsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatIconModule,
    MatSlideToggleModule,
    MatSidenavModule,
    MatButtonModule,
    MatCardModule,
    MatGridListModule,
    RouterModule,
    MatInputModule,
    MatSelectModule,
    MatFormFieldModule,
    MatListModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

searchCities.component. html

<mat-card class="search_cities">
    <mat-card-header>
        <mat-card-title class="card_title">SEARCH CITIES</mat-card-title>

    </mat-card-header>

    <input placeholder="SEARCH CITY" type="text" class="text_box" list="search" autocomplete=“off” [(ngModel)]="name">
    <button mat-icon-button class="search_button" (click)="searchCity()"><i class="fa fa-search fa-2x"></i></button>

    <datalist id="search" style="background-color: red;color: silver;">
                  <option value="London"></option>
                  <option value="big"></option>

              </datalist>
    <mat-card-content>
        <div style="padding-left: 40px;padding-top: 50px;">
        <mat-card style="height: 400px; width: 300px;">
            <div class="title">
                    {{name | uppercase}}
            </div>   
            <mat-card-content class="temp">
                {{temp['temp']- 273.15 | number:'1.0-0'}}&#8451;
            </mat-card-content>
            <div>
                <p class="main">
                    {{cities[0].main | uppercase}}
                </p>
                <p class="temp_min">
                    {{temp['temp_min']- 273.15 | number:'1.0-0'}}&#8451; &nbsp; &nbsp;<span class="temp_max">{{temp['temp_max']- 273.15 | number:'1.0-0'}}&#8451;</span>
                </p>
            </div>
            <div style="text-align: center;padding-top: 35px;">
            <button mat-raised-button (click)="add()" class="button"><span style="font-size: 25px;">&nbsp;&nbsp;&nbsp;&nbsp;ADD+&nbsp;&nbsp;&nbsp;&nbsp;</span></button>
            </div>
        </mat-card>
        </div>


    </mat-card-content>

</mat-card>

searchCities.component.ts

import { Component, OnInit } from '@angular/core';
import { WeatherService } from '../services/weather.service';
import { FirebaseService } from '../services/firebase.service';
import { AngularFireDatabase } from 'angularfire2/database';

import { from } from 'rxjs';

@Component({
  selector: 'app-search-cities',
  templateUrl: './search-cities.component.html',
  styleUrls: ['./search-cities.component.scss']
})
export class SearchCitiesComponent implements OnInit {

  constructor(private weathersService: WeatherService,
    private firebaseService: FirebaseService , private db: AngularFireDatabase ) { }
  cities: Array<any>;
  temp : Array<any>;
  name='';
  check: Array<any>;

  ngOnInit() {
  }

  searchCity(){
    this.weathersService.getcities(this.name).subscribe(data => this.temp = data['main']);
    this.weathersService.getcities(this.name).subscribe(data => this.cities = data['weather']);
  }

  add()
  {
    this. db.list('/user/cities').valueChanges().subscribe(check => {this.check = check});
    for (let c of this.check){
     if( c.name == this.name)
     {
      console.log("Please enter new city");
      return;
     }
    } 
      this.firebaseService.addCity(this.name , this.temp['temp'] , this.cities[0].main , this.temp['temp_min'] , this.temp['temp_max']);
  }
}

weather.service .ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

key = "5b2329ae6d45a6392cb78ad20970331f";


  constructor(private http : HttpClient) { }

  getcities(city: string){
    return this.http.get('https://api.openweathermap.org/data/2.5/weather?q='+city+'&appid='+this.key);
  }

}

Я получаю эту ошибку в своей консоли. "ОШИБКА TypeError: Невозможно прочитать свойство 'temp' из неопределенного в Object.eval [как updateRenderer] (SearchCitiesComponent. html: 21) в Object.debugUpdateRenderer [как updateRenderer] (core. js: 11080)". Пожалуйста, помогите. Пробовал все, что мог из моих знаний.

Answer 1

Ошибка относится к вашей переменной temp : Array<any>;, которая не определяется при запуске компонента.

Заполняется только после того, как ваша getcities() наблюдаемая возвращает значение. Этого не произойдет, пока пользователь не нажмет кнопку поиска по виду вещей.

Чтобы решить эту проблему, вы можете скрыть элементы, которые используют temp['XXX'], до тех пор, пока эта переменная не будет заполнена. При этом Angular не будет пытаться получить доступ к этим свойствам для неопределенной переменной. Например;

...
<!-- if temp is defined, show -->
<mat-card style="height: 400px; width: 300px;" *ngIf="temp">
...
    <mat-card-content class="temp">
        {{temp['temp']- 273.15 | number:'1.0-0'}}&#8451; <!-- This will now be defined -->
    </mat-card-content>
...

Answer 2

Я вижу многократную проблему здесь.

1. Вам не нужно подписываться дважды, чтобы получить данные. Он запустит два отдельных HTTP-запроса. Вы могли бы сделать

searchCity() {
  this.weathersService.getcities(this.name).subscribe(
    data => { 
      this.temp = data['main'];
      this.cities = data['weather'];
    },
    error => {
      // handle error
    }
  );
}

Свойства main и weather из API являются объектами. Все же они объявлены как массивы. Вы можете просто объявить их как тип any

cities: any;
temp : any;
check: any;