Question

我正在尝试使用Angular 5创建一个Web应用程序。我创建了Web应用程序，一切正常。我有一个订单系统，管理员可以看到列出的所有订单。当新订单进入时，订单列表会自动更新。这很好。我想要一个自动警报系统，当新订单自动进入时，它会播放简单的声音。我们可以考虑表中列出了8个订单。一个新订单进来，它显示9个订单。这样可行。当第9个订单上市时，我想要警报系统。就像当新邮件自动进入时，电子邮件收件箱会生成自动桌面通知。我是新手。

这里是html代码

<table class="table">
  <thead>
    <tr>
      <th>Customer</th>
      <th>Date</th>      
      <th>Status</th>
      <th></th>
    </tr>
  </thead> 
  <tbody>
    <tr *ngFor="let order of filteredOrders | reverse" >
      <td>{{ order.shipping.name }}</td>
      <td>{{ order.datePlaced | date}}</td>
        <td>{{ order.orderStatus }}</td>
      <td>
        <a [routerLink]="['/admin/orders/', order.$key]">View</a> 
      </td>

    </tr>
  </tbody> 
</table>

可能是ngOnchanges会帮助但不确定如何在实际的component.ts中实现它。如果有人有任何例子，那将有所帮助。感谢

EDIT。以下是TS代码。

import { Order } from './../../models/order';
import { OrderService } from './../../order.service';
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import 'rxjs/add/operator/take';
import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from '@angular/router';
import { AuthService } from '../../login/auth.service';

@Component({
  selector: 'app-admin-orders',
  templateUrl: './admin-orders.component.html',
  styleUrls: ['./admin-orders.component.css']
})
export class AdminOrdersComponent implements OnInit, OnDestroy, OnChanges {
  orders: any[];
  filteredOrders: any[];
  subscription: Subscription;
  user: firebase.User;
  user$;    

  constructor(private orderService: OrderService,
    private afAuth: AngularFireAuth,
    private router: Router,
    private authService: AuthService) {
    this.subscription = this.orderService.getOrders().subscribe(orders =>
      this.filteredOrders = this.orders = orders);
    afAuth.authState.take(1).subscribe(user => this.user$ = user);
  }  

  filter(query: string) {
    this.filteredOrders = (query) ?
      this.orders.filter(p => p.orderStatus.toLowerCase().includes(query.toLowerCase())) :
      this.orders;
  }

  filterAll() {
    this.subscription = this.orderService.getOrders().subscribe(orders =>
      this.filteredOrders = this.orders = orders);
  }

  ngOnInit() {    
  }

  ngOnChanges(changes: SimpleChanges) {    

  }   

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }    

}

Angular 5 - 关于数据更改的自动声音通知

0 个答案: