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

【问题标题】：Show four different car logos in Webcomponent/Stencil.js在 Webcomponent/Stencil.js 中显示四种不同的汽车标志
【发布时间】：2020-08-24 05:41:17
【问题描述】：

我是 Web Components 和 Stencil.js 的新手，我正在开发一个应用程序，该应用程序提供有关通过用户选择汽车类型的详细汽车信息。我需要根据来自服务器的响应显示四个不同的徽标，因为徽标只提供了四个图像。我对后端的请求运行良好，并且我的条件也适用于渲染徽标；我目前正在将此信息记录到控制台。

现在我需要根据模板中的响应显示这四个不同的徽标，这就是问题所在。我在组件的 render-Method 中尝试了 Handlebars-Syntax，但没有奏效并给我一个错误。

所以我被困在这里并寻找解决方案。直到现在我在谷歌或这里都找不到任何东西。

我创建了 checkLogo 方法，以便根据后端的响应获取呈现的徽标。

在 render() 方法中，我创建了四个类似 Handlebars 的 if 条件，它们不起作用并给出错误。

图像应从图像源文件夹中渲染，无论是宝马、梅赛德斯、大众或奥迪。

任何提示或帮助将不胜感激，谢谢！

代码如下：

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

【问题讨论】：

标签： javascript reactjs stenciljs

【解决方案1】：

你不能像这样在 JSX 中直接使用 if 语句，但你可以使用 ternary operator：

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

这只会渲染条件为true的img标签。

【讨论】：