javascript - 如何添加警报 angular11
问题描述
我只想做一个简单的警报,我找到了一些使用 angular 11 和 alertjs 的解决方案,但它已经很老了,想通过服务来解决我的问题,我可以不使用服务来解决这个问题吗?或者我的错误是什么?角.json
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
组件.ts
import {
Component,
OnInit
} from '@angular/core';
import { Product } from './product';
declare let alertify:any;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() {}
title = "Ürün Listesi"
filterText=""
products: Product[] = [{
id: 1,
name: "Laptop",
price: 15,
categoryId: 1,
description: "Asus Zenbook",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 2,
name: "Mouse",
price: 25,
categoryId: 2,
description: "A4Tech",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 1,
name: "Laptop",
price: 15,
categoryId: 1,
description: "Asus Zenbook",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 2,
name: "Mouse",
price: 25,
categoryId: 2,
description: "A4Tech",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 1,
name: "Laptop",
price: 15,
categoryId: 1,
description: "Asus Zenbook",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 2,
name: "Mouse",
price: 25,
categoryId: 2,
description: "A4Tech",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 1,
name: "Laptop",
price: 15,
categoryId: 1,
description: "Asus Zenbook",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 2,
name: "Mouse",
price: 25,
categoryId: 2,
description: "A4Tech",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 1,
name: "Laptop",
price: 15,
categoryId: 1,
description: "Asus Zenbook",
imageUrl: "https://picsum.photos/200/100"
}, {
id: 2,
name: "Mouse",
price: 25,
categoryId: 2,
description: "A4Tech",
imageUrl: "https://picsum.photos/200/100"
},
];
emptyProducts = "Ürün Listesi boş"
ngOnInit(): void {}
addToCart(product:any){
alertify.succes("added")
}
}
<h3 *ngIf="products; else:noProducts">{{title}}</h3>
<ng-template #noProducts>
<div class="alert alert-danger" role="alert">
{{emptyProducts}}
</div>
</ng-template>
<div class="mb-3">
<input [(ngModel)]="filterText" class="form-control" id="productName" placeholder="Arama metnini giriniz">
<div id="text" class="form-text" *ngIf="filterText;else:noText">Şuan <span>{{filterText}} aradınız</span></div>
</div>
<ng-template #noText>
</ng-template>
<div class="row">
<div *ngFor="let item of products | productFilter:filterText" class="card" style="width: 18rem;">
<div class="card-body">
<img [src]="item.imageUrl" class="card-img-top" alt="{{item.name}}">
<h5 class="card-title">{{item.name | uppercase}} {{item.price| currency:"TRY":"TL":""}} </h5>
<p class="card-text">{{item.description}}</p>
<a (click)="addToCart(item)" class="btn btn-primary">Sepete Ekle</a>
</div>
</div>
</div>
Blockquote ERROR ReferenceError: alertify is not defined Blockquote
错误在哪里
解决方案
推荐阅读
- azure-logic-apps - 错误 TF51535 通过逻辑应用和 REST API 将自定义字段添加到 Azure DevOps
- accessibility - 使用 iText7 向现有 PDF 添加标签、标题等
- typescript - 在用于离子和离子可选过滤器服务之前,如何初始化属性?
- python - 创建 Tkinter 的 Canvas 绘图列表
- csv - 使用谷歌脚本将 csv 文件垃圾加载到谷歌工作表中
- swiftui - 列表背景不变色
- javascript - 带有范围的计算器使用 JavaScript 返回“0”
- c# - 如何在 Unity2D 中将 Collider2D 添加到 Line Renderer?
- node.js - 使用 Joi 在数组中验证具有条件的对象
- python - 外部表不能在事务块内运行