Ziehen und Ablegen von eckigem Material cdkDragConstrainPosition ist nicht auf die Komponente beschränkt

--Chris Kooken

Ich verwende CDK Drag & Drop in meinem Projekt. Innerhalb der Methode: cdkDragConstrainPosition berechne ich einen "Snap" an Spalten in meiner Komponente. Wenn diese Methode aufgerufen wird, kann ich auf keine meiner Variablen auf Komponentenebene zugreifen. Sie sind alle undefiniert. Wenn ich das mache console.log(this), gibt es DragRefso den Bereich aus, der auf die Komponente eingestellt ist. Wie kann ich innerhalb dieser Funktion auf meine Variablen auf Komponentenebene zugreifen?

<div cdkDrag cdkDragBoundary=".drag-boundary" [cdkDragData]="{'colwidth': colWidth}" [cdkDragConstrainPosition]="computeDragRenderPos" [style.width.px]="colWidth" style="position: absolute; transform: translate3d(80px, 177px, 0px); background-color: beige; top: 0; left: 0; height: 42px; overflow: hidden">
    <div>Chris's awesome presentation. Doing fun stuff with science</div>
  </div>

Relevanter Komponentencode:

computeDragRenderPos(pos, dragRef, clientRect) {
    console.log(this);
    console.log(this.myComponentVariable); //this is undefined

}
Völlig neu

Dies liegt daran , dass cdkDragConstrainPositiondie Funktion als Parameter und nicht als Wert akzeptiert wird. Die Funktion wird also im Bereich der Anweisung aufgerufen, die sie als Eingabe verwendet, und ist daher thisnicht Ihre Komponente. Sie können Ihre Funktion mithilfe der Pfeilfunktion definieren , um den Bereich beizubehalten. Versuchen Sie so etwas (von oben nach unten):

computeDragRenderPos = (userPointerPosition: Point, dragRef: DragRef,
  dimensions: ClientRect): Point => {
      //console.log(this.myComponentVariable);
}

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

TOP Liste

  1. 1

    So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

  2. 2

    Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

  3. 3

    Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

  4. 4

    Eclipse Oxygen - Projekte verschwinden

  5. 5

    Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

  6. 6

    Wie kann ich den Kaskadenmodus global einstellen?

  7. 7

    Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

  8. 8

    So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

  9. 9

    Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

  10. 10

    Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

  11. 11

    Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

  12. 12

    ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

  13. 13

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  14. 14

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  15. 15

    Wie wählt man Unterschiede mit drei Tabellen aus?

  16. 16

    Ärgerliches Problem mit yaml, das ich nicht lösen kann

  17. 17

    Wie kann ich meine Tabelle abfragen, um sie in mySQL nach 2 Feldern zu gruppieren?

  18. 18

    So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

  19. 19

    Fügen Sie eine weitere Schaltfläche zu gwt Suggest Box hinzu

  20. 20

    Modbus Python Schneider PM5300

  21. 21

    Wie kann eine gleichmäßige Lastverteilung in ElasticSearch mit Indizes mit unterschiedlicher Anzahl von Shards erreicht werden?

heißlabel

Archiv