Aus SatriaWiki
Wechseln zu: Navigation, Suche
Zeile 77: Zeile 77:
 
</div>
 
</div>
 
</nowiki></poem></code>
 
</nowiki></poem></code>
 +
|}
  
 
== Observables ==
 
== Observables ==
Zeile 82: Zeile 83:
 
Für rxJS > 5.5:
 
Für rxJS > 5.5:
  
 +
<code><poem>
 
import { first } from 'rxjs/operators';
 
import { first } from 'rxjs/operators';
−
 
 
observableMethod.pipe(first()).subscribe(method);
 
observableMethod.pipe(first()).subscribe(method);
 +
</poem></code>
  
 
Es gibt wohl aber Situationen, in denen die Subscription sowieso automatisch beendet wird...
 
Es gibt wohl aber Situationen, in denen die Subscription sowieso automatisch beendet wird...
−
|}
+
 
 +
=== Finalize ===
 +
Der operator "finalize" wird ausgeführt nachdem das Observable fertig ist, ob mit oder ohne Fehler:
 +
 
 +
<code><poem>
 +
import { finalize } from 'rxjs/operators';
 +
asyncMethod.pipe(finalize(() => executThis()));
 +
</poem></code>

Version vom 25. Februar 2020, 14:07 Uhr

UI

Datum formatieren

(new Date()).toLocaleDateString("de-DE", { day: '2-digit', month: '2-digit', year: 'numeric' });

Quellen:

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Pipes mit Parametern

Möchte man ineinem Template einen Wert durch eine Pipe schicken und dabei Parameter mitgeben, werden diese ungewöhnlicherweise mit einem Doppelpunkt eingeleitet und getrennt: 

{{status | round: 2[: 4]}}

In eckigen Klammern stehen mögliche weitere Paramter.

In der Pipe-Klasse werden diese Parameter in der transform() Methode dann als Array oder einzeln übergeben, je nach dem, wie die Methode deklariert ist:

transform(value: any, arg1?: any, arg2?: any)

oder

transform(value: any, args?: any[])

Eingabe

Validierungen

component.ts template.html


import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
class
{
  angForm: FormGroup;

  constructor(private formBuilder: FormBuilder)
  {
    this.angForm = formBuilder.group({
      email: ['', Validators.required],
      special: ['', this.customValidation("DE")]
    })
  }

  customValidation(loc: string) : ValidatorFn
  {
    return (control: AbstractControl) =>
    {
      if (loc == "DE" && control.value == "Deutsch")
        return null;
      else
        return { wrongCountry: true };
    }
  }
}


<input type="text" formControlName="email" [(ngModel)]="useremail"/>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)">
  <div *ngIf="angForm.controls['email'].errors.required">
    Pflichtfeld!
  </div>
</div>

<input type="text" formControlName="special" [(ngModel)]="custom"/>
<div *ngIf="angForm.controls['special'].invalid && (angForm.controls['special'].dirty || angForm.controls['special'].touched)">
  <div *ngIf="angForm.controls['special'].errors.wrongCountry">
    Falsches Land!
  </div>
</div>

Observables

One-time subscription

Für rxJS > 5.5:

import { first } from 'rxjs/operators';
observableMethod.pipe(first()).subscribe(method);

Es gibt wohl aber Situationen, in denen die Subscription sowieso automatisch beendet wird...

Finalize

Der operator "finalize" wird ausgeführt nachdem das Observable fertig ist, ob mit oder ohne Fehler:

import { finalize } from 'rxjs/operators';
asyncMethod.pipe(finalize(() => executThis()));

Abgerufen von „https://wiki.satria.de/index.php?title=Angular&oldid=3003“