Question

这是我的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）中的
ERROR：错误TS2554：期望1个参数，但得到4个。 src / app / app.component.ts（4,12）：错误TS2362：算术运算必须是“ any”，“ number”，“ 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'

Answer 1

这在您的app.component中看起来是错误的

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

看起来像您粘贴了它，却错过了''之间的目标。

在处理多行字符串时，请尝试使用`而不是'，就像在这里所做的一样：

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

Answer 2

根据这些错误，问题出在AppComponent中的模板中，因为在包装内容时无法使用字符串。

您需要将模板放入template literal中。您在styleUrls

中也有错误

template: ` <header> 
             <h1> Ang app</h1>
            </header>
            <weather-list></weather-list>`,
styleUrls: ['src/css/weater-item.css']

角天气应用程序无法编译

2 个答案: