Не удалось скомпилировать угловое приложение погоды - PullRequest
Новая
       13

Не удалось скомпилировать угловое приложение погоды

0 голосов
/ 21 марта 2019

Это мой app.component.ts: 

import { Component } from '@angular/core';
import {WeatherListComponent} from './weather/weather-list.component';

@Component({
    selector: 'app-root',
    template: '
        <header> 
            <h1> Ang app</h1>
        </header>
        <weather-list></weather-list>
    ',
    styleUrls:[''src/css/weater-item.css]
})
export class AppComponent {
    title = 'weather';
}

Это мой weather-list.component.ts: 

import {Component, OnInit} from 'angular/core';
import {WeatherItemComponent} from './weather-item.component';
import {WeatherItem} from './weather-item';
import {WeatherService} from './weather-service';

@Component({
    selector: 'weather-list',
    template:`
        <section class='weather-list'>
            <weather-item>*ngFor='#weatherItem of 
            weatherItems'[item]='weatherItem'</weather-item>
        </section>`,

    directives:  [WeatherItemComponent],
    providers:[WeatherService]
})
export class WeatherListComponent implements onInit {
    weatherItems:WeatherItem[];

    constructor(private_weatherService: WeatherService){}

    ngOnInit():any {
        this.weatherItems= this._weatherService.getWeatherItems();
    }   
}

Это мой weather-item.component.ts: 

import {Component} from 'angular/core';

@Component({
    selector: 'weather-item',
    template: `
        <article class='weather-element'>
            <div class='col-1'>
                <h3>{{weatherItem.cityName}}</h3>
                <p class='info'>{{weather.description}}</p>
            </div>
            <divclass='col-2'>
                <span class='temperature'>{{weather.temperature}}</span>
            </div>
        </article>
        `,
    styleUrls=['src/css/weather-item.css'],
    inputs:['weatherItem: item']
})

export class WeatherItemComponent { 
    weatherItem: Weather;

    constructor(){
        this.weatherItem= new WeatherItem('London'.'RAINY',32);
    }
}

Кто-нибудь знает, какую ошибку я допустил, не удалось скомпилировать с множеством ошибок, например:

ОШИБКА в src / app / app.component.ts (4,2): ошибка TS2554: ожидается 1 аргумент, но получено 4. src / app / app.component.ts (4,12): ошибка TS2362: левая часть арифметической операции должна иметь тип 'любой ',' номер ',' bigint 'или тип перечисления src / app / app.component.ts (4,12): ошибка TS2365: оператор' <'не может быть применен src / app / app.component.ts (7, 5): ошибка TS2552: не удается найти имя «заголовок».Вы имели в виду «Заголовки»?src / app / app.component.ts (8,6): ошибка TS2304: не удается найти имя 'h1'.src / app / app.component.ts (8,10): ошибка TS2304: не удается найти имя «Ang».src / app / app.component.ts (10,3): ошибка TS2304: не удается найти имя «погода».src / app / app.component.ts (10,11): ошибка TS2304: не удается найти имя «список».src / app / app.component.ts (12,3): ошибка TS2304: не удается найти имя 'styleUrls' </p>

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

В соответствии с этими ошибками проблема в вашем шаблоне в AppComponent, потому что строка не может быть использована во время переноса содержимого.

Вам необходимо поместить шаблон в template literal. У вас также есть ошибка в styleUrls

template: ` <header> 
             <h1> Ang app</h1>
            </header>
            <weather-list></weather-list>`,
styleUrls: ['src/css/weater-item.css']
0 голосов
/ 21 марта 2019

Это выглядит неправильно в вашем app.component 

styleUrls:[''src/css/weater-item.css]

Похоже, вы вставили его и пропустили цель между ''.

И попробуйте использовать `вместо 'при выполнениимногострочные строки, как вы сделали здесь: 

template: '
                <header> 
                    <h1> Ang app</h1>
                </header>
                <weather-list></weather-list>
              '
...