错误 $ 未在 Angular 通用中定义

Question

我在 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>");
            });
        }
}

Answer 1

你不应该在使用 Angular 时使用 jQuery，真的。 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 管道订阅它，然后使用 *ngFor 指令

遍历城市列表

为了做得更好，我再次建议从模板调用任何类型的函数，并尝试在您的订阅中尽可能多地执行，这样就可以了：

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 而不是在模板中这样做。这是更好的做法。

错误 $ 未在 Angular 通用中定义

Error $ is not defined in Angular Universal

jquery

angular-universal

angular