Typsichers Binding für matSortDirection

[Quaneu]

Hallo zusammen,

ich benutze Angular und Martial (12.2.11). Ich will nun folgendes Binding:
html:
[CODE lang="html" title="Binding"]<table mat-table ... matSortDirection="{{sortOrder}}">[/CODE]
ts:
[CODE lang="java" title="Code"] public sortOrder: SortDirection = '';[/CODE]

Leider bekomme ich jedoch diesen Fehler:

Type 'string' is not assignable to type 'SortDirection'.

Wenn ich anstatt {{sortOrder}} z.B. "asc" schreibe geht es.

Was muss ich machen, damit das Binding typsicher funktioniert.

Schöne Grüße
Quaneu

 

[Flown]

<table mat-table ... [matSortDirection]="sortOrder">

Bindingerklärung HIER

 

[Quaneu]

Vielen Dank für die schnelle Antwort.

Jetzt hätte ich noch eine Frage dazu. Denn ich denke es sollte schon bei

matSortDirection="{{sortOrder}}"

bleiben, da dies eine Initialisierung ist. Binding ist wohl an dieser Stelle das falsche Wort, Entschuldige.

Hier das "ganze" Beispiel:
[CODE lang="html" title="Html"]<table mat-table [dataSource]="data" [hidden]="!data"
matSort (matSortChange)="loadData()"
matSortActive="{{sortColumn}}" matSortDirection="{{sortOrder}}">[/CODE]

Ich lese gerade ein Buch und in diesem ist dieses Beispiel, leider lässt es sich bei mir nicht kompilieren, da die Checks strenger sind. Jedoch würde ich sie dabei belassen, wenn es geht. D.h. an dieser Stelle typsicher bleiben.

 

[Flown]

Das eine ist ein Binding - wie ich es dir gezeigt habe, das andere was du machst ist eine Text interpolation (HIER). Typsicher fährst du auf jedefall mit dem Binding.

 

[Quaneu]

Ok. Danke. Dann ändere ich es zu einem Binding.

Was ich noch nicht ganz verstehe, matSortDirection="asc" geht.

Bei der Text interpolation steht

More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string.

D.h. am Ende steht auch der string "asc" (wenn die Variable den Wert hat).

Sorry, aber ich würde das nur noch verstehen wollen, denn habe ich nichts in dem Buch gefunde.

 

[mrBrown]

Bei der Text interpolation steht

More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string.

D.h. am Ende steht auch der string "asc" (wenn die Variable den Wert hat).

"asc" ist der Wert, der Typ ist durch die "template expression" aber string, und: "Type 'string' is not assignable to type 'SortDirection'"

 

[Flown]

Die Frage ist wann der Wert evaluiert wird.
Bei der text interpolation steht auch dabei, dass sie idempodent sein sollte (side-effect-free). Was dein change nicht ist, weil die table damit verändert wird.
Auch die change-detection läuft hier anders und kann zu Fehlern führen.

Wenn du den Wert nicht verändern möchtest, sondern das von code->view bringen möchtest (und somit die view steuern) musst du das mit bindings machen. Wenn du Werte anzeigen möchtest, dann mit interpolation.

Wenn es sich so und so nicht ändert, dann lass es einfach auf matSortDirection="asc", keinen Grund das via Variable zu lösen.

 

[mrBrown]

Bei der text interpolation steht auch dabei, dass sie idempodent sein sollte (side-effect-free).

Das dürfte sich doch nur auf die Interpolation selbst beziehen, und die ist, solange primitive Werte benutzt weden, immer idempodent & side-effect-free?

Geht dabei doch eher um Dinge wie in der Expression Methoden aufrufen, die anderen Zustand ändern.

 

[Quaneu]

Wie gesagt, das ist ein Beispiel aus dem Buch "ASP.NET Core 5 and Angular". Und sie setzen im Code den default, was ich nicht ganz so schelcht finde, da dies auch nicht ins html gehört, finde ich.

Ok. D.h. wenn ich "asc" schreibe ist es schon kein "string" mehr und bei der Interpolation ist es sicher ein string.

Damit kann ich erstmal leben 😉

Vielen Dank für eure Hilfe

 

[Flown]

Das dürfte sich doch nur auf die Interpolation selbst beziehen, und die ist, solange primitive Werte benutzt weden, immer idempodent & side-effect-free?

Du hast recht ... ich hätte auch aufmerksamer darüber fliegen sollen.

Ok. D.h. wenn ich "asc" schreibe ist es schon kein "string" mehr und bei der Interpolation ist es sicher ein string.

Wenn die view gerendet ist, dann steht, egal aus welcher quelle, asc drinnen.

 

[mrBrown]

Ok. D.h. wenn ich "asc" schreibe ist es schon kein "string" mehr und bei der Interpolation ist es sicher ein string.

In beiden Fällen ist der Laufzeit-Typ string. Typescript kennt aber "Literal Types", "asc" hat dann den Typ "asc", und nicht nur string.