(Klick)=" Ereignis nicht arbeiten , im Winkel 2

Erkundete ich eine Menge, aber die Lösung ist nicht für mich arbeiten.
Ich bin versucht, eine Methode aufzurufen, die in meinem code aber es funktioniert nicht. Es gibt keine Fehler aber das click-Ereignis ist nicht arbeiten auch.
In meinem code, ich bin das hinzufügen einer Schaltfläche dynamisch und es wird Hinzugefügt, in meinem code. Aber wenn ich Klick auf Approved oder UnApproved dann ist nichts passiert. Ich bin mit <ng-table> , Approved und UnApproved - Taste sind in <ng-table> Richtlinie.
Bitte schlagen Sie mich, wo ich falsch mache?

Mein code ist:

     editData() {
    this.data.forEach(function (row) {
          if (row.isApproved) {
        row.editButton = "<button (click)='approveUnApproveLeave()'>UnApproved</button>";
      } else {
        row.editButton = "<button (click)='approveUnApproveLeave()'>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    })
  }

  approveUnApproveLeave() {
    console.log("approveUnApproveLeave called");
  }

} //class closed

finden Sie die Momentaufnahme für ein besseres Verständnis.

(Klick)=

InformationsquelleAutor Shubham Verma | 2017-03-14
  1. 1

    Wenn Sie innterHTML zur Anzeige von dynamischen HTML dann...

    Wenn Sie hinzufügen, html dynamisch mit innerHTML es funktioniert gut, und geben Sie den Wunsch-Ausgang in der Benutzeroberfläche vor. Aber mit dem gleichen Ansatz, Wenn Sie dynamic HTML enthält angular context in es zB. (klicken Sie auf) Ereignis, angular context wird nicht funktionieren, weil innerHTML ist nicht für ihn bestimmt.

    So, wenn dynamische HTML enthält eckige Rahmen in es, müssen Sie sich mit DynamicComponentLoader, die injiziert Komponente zusammen mit HTML-dynamisch, wo Sie verwenden können, angular Kontext z.B. click-Ereignis

    DEMO: https://plnkr.co/edit/BcQXNf5AWrDUXFamIGIy?p=preview

    InformationsquelleAutor micronyks
  2. -1

    Winkel-Prozesse, Komponenten-templates, wenn es kompiliert wird, eine Komponente (mit AoT, bevor der browser lädt die Anwendung). HTML Hinzugefügt, danach nicht verarbeitet werden durch Eckige. (click)="..." Hinzugefügt wird und dann ignoriert Eckig.

    Was Sie tun können, ist die Registrierung eines Ereignishandlers zwingend

      constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef);

  editData() {
    this.data.forEach((row) => { //don't use function if you want to use `this`
          if (row.isApproved) {
        row.editButton = "<button>UnApproved</button>";
      } else {
        row.editButton = "<button>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    });
    this.cdRef.detectChanges(); //to ensure the DOM is updated
    //add event handlers imperatively
    this.elRef.nativeElement.querySelectorAll(button).forEach(b => b.addEventListener('click', this.eventHandler.bind(this));
  }
    • Danke, Aber ich erhielt den Fehler, nachdem dies zu tun:Fehler: Versuch, einen zerstörten anzeigen: detectChanges.
    • Schwer zu sagen, ohne zu sehen, mehr code. Können Sie erstellen eine minimale Reproduktion in Plunker?
    • Jetzt Fehler wurde behoben, aber es hat nicht geklappt.
    • was wird die richtige Lösung sein ? alle bitte teilen
    • Hat einer eine Lösung finden. Dies hat bei mir nicht funktioniert.
    • Habe ich vergessen zu entfernen, die (click)='approveUnApproveLeave()' aus, den code habe ich kopiert aus der Antwort. Ich denke, das ist es, was die downvotes waren Vordergrund. Fixiert, dass ich in meiner Antwort.

    InformationsquelleAutor Günter Zöchbauer
Schreibe einen Kommentar