Покажите четыре разных логотипа автомобилей в Webcomponent / Stencil. js - PullRequest
Новая
       64

Покажите четыре разных логотипа автомобилей в Webcomponent / Stencil. js

0 голосов
/ 08 мая 2020

Я новичок в веб-компонентах и ​​трафарете. js и я работаю над приложением, которое предоставляет подробную информацию об автомобиле относительно выбора типа автомобиля пользователем. Мне нужно показать четыре разных логотипа в соответствии с ответом с сервера, поскольку для логотипов предусмотрено всего четыре изображения. Мой запрос к бэкэнду работает хорошо, и мое условие, при котором также должен отображаться Lo go; В настоящее время я записываю эту информацию в консоль.

Теперь мне нужно отобразить эти четыре разных логотипа в соответствии с ответом в шаблоне, и это проблема. Я попробовал Handlebars-Syntax в методе рендеринга компонента, но это не сработало и привело к ошибке.

Итак, я застрял здесь и ищу решение. Я не мог найти ничего до сих пор ни в Google, ни здесь.

Я создал метод checkLo go для рендеринга логотипов в соответствии с ответом серверной части.

В методе render () я создал четыре if-условия, подобные Handlebars, которые не работают и выдают ошибку.

Изображения должны быть визуализированы из папки с исходными изображениями, будь то BMW, Mercedes, Volkswagen или Audi.

Любые подсказки или помощь будут очень признательны, спасибо!

Код следующий: 

import {Component, Event, EventEmitter, h, Method, Prop, State} from '@stencil/core';
import {Icon} from '../../utils/utils';
import {xxxCarsearchResultModel} from './xxx-carsearch-result.model';






function checkLogo(response) {
    for (var key in response) {
        // skip loop if the property is from prototype
        if (!response.hasOwnProperty(key)) continue


            var obj = response[key];
            for (var prop in obj) {
                // skip loop if the property is from prototype
                if (!obj.hasOwnProperty(prop)) continue;
                // iterating through the nested objects
                console.log(prop + " = " + obj[prop]);
            }
            var parsed = (obj[prop]);
            // if (parsed == 'Audi'  || parsed == 'BMW' ||  parsed == 'Volkswagen' || parsed == 'Mercedes'  ) {
            //     console.log('it is an ' + obj[prop]);
            //
            //
            // }
            // else console.log('it´s another car')




    }

}

@Component({
    tag: 'xxx-carsearch',
    styleUrl: 'xxx-carsearch.scss',
    shadow: true
})
export class CarSearch {
    /**
     * The score
     */
    @Prop({mutable: true, reflectToAttr: true}) tsn: string = null;
    @Prop({mutable: true, reflectToAttr: true}) hsn: number = null;

    @Event() carSelected: EventEmitter<VhvCarsearchResultModel>;

    @State() page = 1;
    @State() wsresult: [];

    brand: string;
    model: string;
    fuel: string;
    type: string;
    power: string;
    variant: string;

    selectedcar: string;
    apiPath = 'https://test.xxx.de/xxxx/api/v1/car/guided';

    @Method()
    async getTsn() {
        return this.tsn;
    }

    @Method()
    async getHsn() {
        return this.hsn;
    }

    componentWillLoad() {
        return this.loadWS(this.apiPath);
    }


    loadWS(url: RequestInfo) {
        return fetch(url)
            .then((response: Response) => response.json())
            .then((response) => {
                this.wsresult = response;

            });
    }


    render() {
        let title;
        if (this.page === 1) {
            title = 'Ihr Fahrzeughersteller';
        } else if (this.page === 2) {
            title = 'Modell';
        } else if (this.page === 3) {
            title = 'Kraftstoff';
        } else if (this.page === 4) {
            title = 'Fahrzeugkategorie';
        } else if (this.page === 5) {
            title = 'Leistung';
        } else if (this.page === 6) {
            title = 'Bitte wählen Sie Ihr Fahrzeug';
        }

        if (this.page === 5) {
            return (
                <div>
                    <vhv-icon class='backbutton' onClick={() => this.pageBack()}
                              icon={Icon.Left}/>
                    <h1>{title}</h1>

                    <div class='listwrapper'>
                        {
                            this.wsresult.sort((a: any, b: any) => a.horsePowerFrom - b.horsePowerFrom).map(((element: any) =>
                                    <div class='listelement' onClick={() => this.nextStep(element.key)}>
                                        {element.horsePowerFrom}-{element.horsePowerTo} PS
                                        <vhv-icon size={25} icon={Icon.Right}/>
                                    </div>
                            ))
                        }
                    </div>
                </div>
            );
        } else if (this.page === 6) {
            return (
                <div>
                    <vhv-icon class='backbutton' onClick={() => this.pageBack()}
                              icon={Icon.Left}/>
                    <h1>{title}</h1>
                    <div class='listwrapper'>
                        {
                            this.wsresult.sort((a: any, b: any) => a.horsePowerFrom - b.horsePowerFrom).map(((element: any) =>
                                    <div class='listelement'
                                         onClick={() => this.setTsnHsn(element.tsn, element.hsn, element.brand, element.modelDetailed)}>
                                        {element.modelComplete} HSN: {element.hsn} TSN: {element.tsn}
                                        <vhv-icon size={25} icon={Icon.Right}/>
                                    </div>
                            ))
                        }
                    </div>
                </div>
            );
        } else if (this.page === 7) {
            return (
                <div class='fertig'>
                    <div class='fertigwrapper'>
                        <img src='https://www.xxx.de/xxxxx/auto/bmw@2x.fdc06cc429d06c8c96fc.png'/>
                        {this.selectedcar}
                    </div>
                    <vhv-button onClick={() => this.reset()} icon={Icon.Check}>Neue Suche</vhv-button>
                </div>
            );
        } else {
            return (
                <div>
                    {/*<vhv-icon class='backbutton' hidden={this.page === 1} onClick={() => this.pageBack()}
                              icon={Icon.Left}/>*/}
                    <h1>{title}</h1>
                    <div class="vhv-cs-front">
                        <vhv-search  placeholder="Hersteller suchen..."></vhv-search>
                    </div>
                    <div class='list_wrapper'>
                        <div class='listwrapper top'>
                            <div class='listelement top'>
                                <h4> Häufig gewählte Hersteller</h4>
                            </div>
                            {
                                this.wsresult.slice(0,7).sort((a: any, b: any) => a.value.localeCompare(b.value)).map(((element: any) =>
                                        <div class='listelement' onClick={() => this.nextStep(element.key)}>

                                            <img hidden={this.page !== 1}
                                                 {{#if parsed '==' audi}}
                                                 src='/assets/logos/audi.png'/>
                                            {element.value}
                                            <vhv-icon size={25} icon={Icon.Right}/>
                                            <img hidden={this.page !== 1}
                                                 {{#if parsed '==' 'bmw'}}
                                                 src='/assets/logos/bmw.png'/>
                                            {element.value}
                                            <vhv-icon size={25} icon={Icon.Right}/>
                                            <img hidden={this.page !== 1}
                                                 {{#if parsed '==' 'mercedes'}}
                                                 src='/assets/logos/mercedes.png'/>
                                            {element.value}
                                            <vhv-icon size={25} icon={Icon.Right}/>

                                            <img hidden={this.page !== 1}
                                                 {{#if parsed '==' 'volkswagen'}}
                                                 src='/assets/logos/volkswagen-vw.png'/>
                                            {element.value}
                                            <vhv-icon size={25} icon={Icon.Right}/>
                                        </div>
                                ))
                            }
                        </div>
                        <div class='listwrapper'>
                            <div class='listelement top'>
                                <h4>Alle Hersteller</h4>
                            </div>
                            {
                                this.wsresult.sort((a: any, b: any) => a.value.localeCompare(b.value)).map(((element: any) =>
                                        <div class='listelement' onClick={() => this.nextStep(element.key)}>

                                            <img hidden={this.page !== 1}
                                                 src='/assets/logos/audi.png'/>
                                            {element.value}
                                            <vhv-icon size={25} icon={Icon.Right}/>
                                        </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
            );
        }
    }

    nextStep(value: string) {
        if (this.page === 1) {
            this.loadWS(this.apiPath + '?brand=' + value).then(() => {
                this.brand = value;
                this.page = 2;
            });
        } else if (this.page === 2) {
            this.loadWS(this.apiPath + '?brand=' + this.brand + '&model=' + value).then(() => {
                this.model = value;
                this.page = 3;
            });
        } else if (this.page === 3) {
            this.loadWS(this.apiPath + '?brand=' + this.brand + '&model=' + this.model + '&fuel=' + value).then(() => {
                this.fuel = value;
                this.page = 4;
            });
        } else if (this.page === 4) {
            this.loadWS(
                this.apiPath + '?brand=' + this.brand + '&model=' + this.model + '&fuel=' + this.fuel + '&variant=' + value).then(() => {
                this.variant = value;
                this.page = 5;
            });
        } else if (this.page === 5) {
            const url = `${this.apiPath}?brand=${this.brand}&model=${this.model}&fuel=${this.fuel}&variant=${this.variant}&power=${value}`;
            this.loadWS(url).then(() => {
                this.power = value;
                this.page = 6;
            });
        }
    }

    pageBack() {
        this.page--;
        if (this.page === 1) {
            return this.componentWillLoad();
        } else if (this.page === 2) {
            return this.loadWS(this.apiPath + '?brand=' + this.brand);
        } else if (this.page === 3) {
            return this.loadWS(this.apiPath + '?brand=' + this.brand + '&model=' + this.model);
        } else if (this.page === 4) {
            return this.loadWS(this.apiPath + '?brand=' + this.brand + '&model=' + this.model + '&fuel=' + this.fuel);
        } else if (this.page === 5) {
            return this.loadWS(`${this.apiPath}?brand=${this.brand}&model=${this.model}&fuel=${this.fuel}&variant=${this.variant}`);
        }
    }

    setTsnHsn(tsn: string, hsn: number, brand: string, model: string) {
        this.tsn = tsn;
        this.hsn = hsn;
        this.selectedcar = brand + ' ' + model;
        this.page = 7;

        this.carSelected.emit({
            hsn: this.hsn,
            tsn: this.tsn
        });
    }

    reset() {
        this.page = 1;
        this.tsn = null;
        this.hsn = null;
        return this.componentWillLoad();
    }
}

1 Ответ

1 голос
/ 09 мая 2020

Вы не можете напрямую использовать операторы if в JSX, но вы можете использовать тернарный оператор : 

render() {
  return (<img src={condition === 1 ? 'img1.png' : 'otherImg.png'} />);
}

Это больше подходит для случаев, когда вы только есть два варианта, так как их трудно читать. Если у вас есть другие варианты, вы можете: 

render() {
  return (<div>
    {condition === 1 && (<img src="img1.png" />)}
    {condition === 2 && (<img src="img2.png" />)}
    {condition === 3 && (<img src="img3.png" />)}
  </div>);
}

Это будет отображать только img теги, где условие true.

...