Угловой (щелчок) не включается в HTML при визуализации, любая идея?

Question

Я новичок в angular, Angular (клик) хоть и добавлен в тег, но не отображается в html веб-страницы, и я не смог щелкнуть по нему, как ожидалось. есть идеи о том, что здесь происходит? Спасибо

import { Component, OnInit } from "@angular/core";
import { EventService } from "./shared/event.service";
import { ToastrService } from "../common/toastr.service";

declare let toastr

@Component ({
  template: `
  <div>
    <h1>Upcoming Angular Events</h1>
    <hr>
    <div class="row">
      <div *ngFor='let event of events' class="col-md-5">
        <event-thumbnail (click)="handleThumbnailClick(event.name)"
        [event]='event'></event-thumbnail>
      </div>
    </div>
  </div>
  `
})

export class EventsListComponent implements OnInit {
  events: any[]
  constructor(private eventService: EventService,
    private toastr: ToastrService){

  }

  ngOnInit(){
    this.events = this.eventService.getEvents()
  }

  handleThumbnailClick(eventName) {
      this.toastr.success(eventName)
  }
}

Что-то не так в последовательности импорта модуля?

@NgModule({


imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    EventsAppComponent,
    EventsListComponent,
    EventThumbnailComponent,
    EventDetailsComponent,
    NavBarComponent
  ],
  providers: [
    EventService,
    ToastrService
  ],

В консоли отображается сообщение об ошибке.

EventsListComponent.html:7 ERROR TypeError: Cannot read property 'extend' of undefined
    at m (toastr.min.js:1)
    at Object.i [as success] (toastr.min.js:1)
    at ToastrService.push../src/app/common/toastr.service.ts.ToastrService.success (toastr.service.ts:8)
    at EventsListComponent.push../src/app/events/events-list.component.ts.EventsListComponent.handleThumbnailClick (events-list.component.ts:34)
    at Object.eval [as handleEvent] (EventsListComponent.html:7)
    at handleEvent (core.js:11107)
    at callWithDebugContext (core.js:12204)
    at Object.debugHandleEvent [as handleEvent] (core.js:11907)
    at dispatchEvent (core.js:8561)
    at core.js:9005

Answer 1

спасибо за большую помощь. событие (click) работает нормально, я обнаружил проблему в пакете 'toastr' . Я переустановил его и импортировал в angular.json прямо под jquery, был импортирован (до этого был выше jquery.js) . и теперь все отлично работает. всем спасибо, счастливого кодирования:)

Answer 2

Эта проблема не является событием клика. Вы передаете event.name в родительском DOM. Но событие * NgFor присутствует в дочернем DOM. В Angular click событие обычно не отображается в DOM.