Ошибка $ не определена в Angular Universal - PullRequest
Новая
       4

Ошибка $ не определена в Angular Universal

0 голосов
/ 04 октября 2019

У меня есть эта проблема в Angular Universal 

ERROR ReferenceError: $ is not defined

Кто-нибудь знает какой-либо способ ее решения?

Это часть кода, которая терпит неудачу 

//some imports ...    
declare var $ : any; 

ngOnInit() {
     generateDirectory(){
            this.api.getCities('country_id='+3996063).subscribe(res => {
                $("#find").append("<ul class='findDir'>");
                for(let c in res){
                    $("#find>ul").append('<li><a href="/find/'+res[c].name.split(' ').join('_').toLowerCase()+'">'+res[c].name+'</a></li>');
                }
                $("#find").append("</ul>");
            });
        }
}

1 Ответ

2 голосов
/ 04 октября 2019

Вы не должны использовать jQuery при использовании Angular, правда. В Angular есть все инструменты для манипулирования HTML так, как вы этого хотите. Это был бы правильный способ сделать это Angular-way: 

interface City {
    name: string;
}

class CitiesComponent implements OnInit {
    public cities$: Observable<City[]>;

    constructor(private readonly api: ApiClient) {}

    ngOnInit() {
        this.cities$ = this.api.getCities(`country_id=3996063`);
    }
}

<ul class="findDir" *ngIf="(cities$ | async) as cities">
    <li *ngFor="let city of cities">
        <a [attr.href]="'/find/' + city.name.split(' ').join('_').toLowerCase()">{{city.name}}</a>
    </li>
</ul>

Я надеюсь, что я не оставил никаких ошибок. Но идея заключается в том, что вы создаете подписку на cities$, которая имеет тип City[].

. Затем в коде шаблона вы подписываетесь на нее, используя трубу async, а затем перебираете список городов, используя * 1010. * директива

Чтобы сделать это еще лучше, я бы посоветовал еще раз любые виды функций вызывать из шаблона и попытаться сделать как можно больше в рамках вашей подписки, чтобы это было: 

interface City {
    name: string;
}

class CitiesComponent implements OnInit {
    public cities$: Observable<City[]>;

    constructor(private readonly api: ApiClient) {}

    ngOnInit() {
        this.cities$ = this.api.getCities(`country_id=3996063`).pipe(
            map(cities => cities.map(city => ({
                    ...city,
                    url: city.name.split(' ').join('_').toLowerCase()
                }))
            )
        );
    }
}

<ul class="findDir" *ngIf="(cities$ | async) as cities">
    <li *ngFor="let city of cities">
        <a [attr.href]="city.url">{{city.name}}</a>
    </li>
</ul>

Как видите, я использую оператор конвейера карты, чтобы добавить свойство url к Observable вместо того, чтобы делать это в шаблоне. Это лучшая практика.

...