预测图像无法渲染

Question

HY， Visual Studio 2015. Angular 4+项目

我想render存在问题，因为它甚至没有编译成ts。如何渲染天气图像？

weather.template.html ：

        <select id="Id" [(ngModel)]="coords" name="Id" (change)="getForecast(coords);">
    <option [ngValue]="c.coords" *ngFor="let c of Cities">
        {{c.name}}
    </option>
</select>

<ng-container *ngFor="let wfc of WeeklyForecast">
    <div>{{wfc.time}}</div>
    <div>{{wfc.icon}}</div>
</ng-container>

<div id="ikona"></div>

WeatherCard.ts ：

import * as React from 'react';
import ReactAnimatedWeather from 'react-animated-weather';

const defaults = [
    {
        icon: 'CLEAR_DAY',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'CLEAR_NIGHT',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'PARTLY_CLOUDY_DAY',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'PARTLY_CLOUDY_NIGHT',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'CLOUDY',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'RAIN',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'SLEET',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'SNOW',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'WIND',
        color: 'white',
        size: 150,
        animate: true
    },
    {
        icon: 'FOG',
        color: 'white',
        size: 150,
        animate: true
    }
];


function iconConverter(arg:string):number {
    let id: number;
    switch (arg) {
        case 'clear-day': { id = 0; break; }
        case 'clear-night': { id = 1; break; }
        case 'partly-cloudy-day': { id = 2; break; }
        case 'partly-cloudy-night': { id = 3; break; }
        case 'cloudy': { id = 4; break; }
        case 'rain': { id = 5; break; }
        case 'sleet': { id = 6; break; }
        case 'snow': { id = 7; break; }
        case 'wind': { id = 8; break; }
        case 'fog': { id = 9; break; }

    }
    return id;
}

const WCard = (icon:string) =>{
    return (
`        <div>
            <p></p>
            <div>

                <ReactAnimatedWeather

                    icon={defaults[iconConverter(icon)].icon}
                    color={defaults[iconConverter(icon)].color}
                    size={defaults[iconConverter(icon)].size}
                    animate={defaults[iconConverter(icon)].animate}
                  />
                <div>
                   </div>
            </div>

        </div>
    `)};

export class WeatherCard extends React.Component {
  public  Icon: string;

    constructor(icon:string) {
        super(icon)
        this.Icon = icon;
      }



    render() {
        return (`<WCard  icon={this.Icon} />`)
    }
}

weather.component.ts ：

import { Input,OnInit,Component } from '@angular/core';

import { WeatherService } from '../servizai/WeatherService';

import { render} from 'react-dom';



//import ReactAnimatedWeather from 'react-animated-weather';

import { WeatherCard } from './WeatherCard';

@Component({
    templateUrl: Prefix + "/weather.template.html",
    selector: 'display',
    providers: [WeatherService]
})



export class WeatherComponent {




    public WeeklyForecast: Array<any>;

    public coords: string;

    constructor(private weatherService: WeatherService) {
    }

   public ToDate(seconds:number): Date {
        var t = new Date(1970, 0, 1);
        t.setSeconds(seconds);
        return t;
    }



    getForecast(): void {

        const el =`<WeatherCard icon={partly-cloudy-day} />`
        render(el, document.getElementById('ikona'));


            }





}