1

我只想做一个简单的警报，我找到了一些使用 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

错误在哪里

4

0 回答 0