Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.1k views
in Technique[技术] by (71.8m points)

javascript - how to add alertify angular11

I just want to make a simple alert, I found a few solutions with angular 11 and alertjs, but it is quite old and wants to solve my problem through services, can I solve this without using services? or what's my mistake here? angular.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"
        ]

component.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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...