Блог

Главная - Вопросы по программированию - Строка таблицы при щелчке функции не работает в Angular7

Строка таблицы при щелчке функции не работает в Angular7

#html #angular #angular7

#HTML #угловой #angular7

Вопрос:

Я пытаюсь вызывать функцию всякий раз, когда я нажимаю строку в таблице HTML, но она не работает и не выдает никаких ошибок.

Я пробовал несколько вещей, и онлайн-код показывает, что, как я это делаю, это должно работать.

Мой код выглядит следующим образом:

HTML:

 <h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" ng-click="onUpdate(story)" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button ng-click="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>

И мой файл .ts выглядит так:

   selectedStory: UserStory;
  onNewStory() {
    var newStory = {id:this.userstories[this.userstories.length-1].id 1, name:"", description:"Deze is nieuw", status:"open", owner:USERS[1]};
    this.userstories.push(newStory);
    this.selectedStory = newStory;
  }

  onUpdate(userstory: UserStory): void {
    this.selectedStory = userstory;
    console.log(this.selectedStory);
  }

В настоящее время моя консоль не печатает журнал, когда я пытаюсь вызвать метод onUpdate. Ожидаемый результат — увидеть некоторые выходные данные в журналах, но я понятия не имею, почему он не запускает метод onUpdate.

Комментарии:

1. Заменить ng-click на (click)

Ответ №1:

В angular 7 вы можете использовать (click) что-то похожее на ng-click Angular JS.

Попробуйте:

 <h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" (click)="onUpdate(story)" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button (click)="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>

StackBlitz Demo

Ответ №2:

ng-click на самом деле для AngularJS (1.x)

Вы хотите использовать (click) для Angular.

ДОКУМЕНТАЦИЯ: https://angular.io/guide/ajs-quick-reference#ng-click

Ответ №3:

Событие запускается дважды. В <tr> и в <button> . Попробуйте это:

 <h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button (click)="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>
Метки: