угловой 6: создание кнопки работает для отображения данных - PullRequest
Новая
       0

угловой 6: создание кнопки работает для отображения данных

0 голосов
/ 15 ноября 2018

Моя таблица содержит кнопку ' Подтверждение ' в конце каждой строки, которая должна быть нажата пользователем, и будет выводиться '(тот, кто нажимает кнопку)' .

Моя проблема в том, что моя кнопка не работает, поскольку в консоли нет ошибок. Ниже в качестве прикрепить моя таблица в HTML и JS. Пожалуйста, обратите внимание, я очень новый в angular 6, и я уже пробовал несколько способов, но не работал. 

import { Component, OnInit } from '@angular/core';
import { PagesService } from "../pages.service";

declare var $: any;

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {

  data$:object;

  constructor(private data: PagesService) { }

  ngOnInit() {
    this.data.getAlert().subscribe(data => this.data$ = data);
    $('#example').DataTable({
     "pagingType": "full_numbers",
      "scrollX": true
    });

    $('#example').find('button').click(function () {
    console.log($(this).after());
    $(this).next().remove();
    $('<p>By ABC</p>').insertAfter($(this));
    });
  }
}

<html>

<table class="table" id="example" style="width:100%;">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Device Type</th>
      <th scope="col">Map Type</th>
      <th scope="col">Name</th>
      <th scope="col">Latitude</th>
      <th scope="col">Longitude</th>
      <th scope="col">Result</th>
      <th scope="col">Last Updated</th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody *ngFor="let data of data$">
    <tr>
      <td>{{data.id}}</td>
      <td>{{data.deviceType}}</td>
      <td>{{data.mapType}}</td>
      <td>{{data.name}}</td>
      <td>{{data.lat}}</td>
      <td>{{data.lng}}</td>
      <td>{{data.result}}</td>
      <td>{{data.lastUpdate}}</td>
      <td><button class="btn btn-block btn-primary">Acknowledge</button></td>
      <td><button class="btn btn-block btn-primary">View</button></td>
    </tr>
  </tbody>
</table>
</html>

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

В вашем HTML.

<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>

И в вашем component.ts file.Под кодом конструктора.

btnClick(){
   alert("It works... ");
}
0 голосов
/ 15 ноября 2018

Добавьте атрибут нажатия к вашей кнопке следующим образом: (click)="console.log('Hello World!')"

Вы можете заменить console.log() на такую ​​функцию: onCLickedAcknowledge() и объявить ее в своем компоненте.

0 голосов
/ 15 ноября 2018

Вы можете использовать обработчик событий щелчка. 

<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>

Компонент: 

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {

  data$:object;

  constructor(private data: PagesService) { }

  ngOnInit() {    
  }

  clickMe(){
// Your logic
  }
}

Более подробная информация доступна здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...