在 Webcomponent/Stencil.js 中显示四种不同的汽车标志

Question

I am new to Web Components and to Stencil.js and I am working on an application that provides detailled car information regarding on the selection of car type through the user. I need to show four different logos according to the Response from the server, as there are just four images provided for the Logos. My request to the backend works well and my condition on which Logo to render as well; I am currently logging this information to the console.

Now I need to display these four different logos according to the response in the template and that is the problem. I tried Handlebars-Syntax in the render-Method of the Component, but that didn´t worked and gives me an error.

So I am stuck here and searching for a solution. I couldn´t find any until now on Google or here.

I created the checkLogo method in order to get the Logos rendered according to the response of the backend.

In the render() method, I created four Handlebars-like if-conditions, that are not working and giving an error.

The images should be rendered from the image source folder weather it´sa bmw, mercedes, volkswagen or audi.

Any hints or help would be very much appreciated, thanks!

The code is the following:

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();
    }
}

Answer 1

You can't directly use if statements in JSX like that, but you could use a ternary operator :

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

This is more suitable for cases where you only have two options as it can become difficult to read. If you have more options you can do:

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

This will only render img tags where the condition is true .