webentwicklung-frage-antwort-db.com.de

Angular Platzhalter für 4 Materialspäne funktioniert nicht richtig

Ich habe versucht, einen eckigen Mat-Chip mit auswählbaren und entfernbaren Optionen zu implementieren. Das Problem ist jedoch, dass der Platzhalter zum Zeitpunkt des Ladens nach oben verschoben wird. Ich bin mir nicht sicher, was ich mit Code falsch mache. Bitte helfen Sie mir, dieses Problem zu beheben.

GIF unten hinzugefügt

enter image description here mein Code ist

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
             [removable]="removable" (remove)="remove(keyword)">
      {{keyword}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Keywords"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-chip-list>
</mat-form-field>

und ts ist

  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;
  separatorKeysCodes = [ENTER, COMMA];
  keywords= [];   // At time load i need this to be empty


public add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;
    if ((value || '').trim()) {
        this.keywords.Push(value.trim());
    }
    if (input) {
        input.value = '';
    }
}

public remove(keyword: any): void {
    let index = this.keywords.indexOf(keyword);
    if (index >= 0) {
        this.keywords.splice(index, 1);
    }
}

ich habe den gleichen Code verwendet, der auf dem Materialdokument angegeben ist, aber ich habe nur Änderungen vorgenommen, anstatt Array-Werte zu laden. Ich übergebe ein leeres Array beim Laden. Bitte helfen Sie mir, dieses Problem zu beheben

8
Munna

Ich habe Angular von 4.4.X auf die neueste Version 5.2.2 aktualisiert. Problem wurde behoben. Scheint Angular Bug.

0
Munna

es ist ein Problem mit der Rechtschreibung der Schlüsselwörter in der TS-Datei. Sie haben es als definiert

  keyowords = [];

Und der Name, auf den Sie sich in der HTML-Datei beziehen, sind Schlüsselwörter. Ändern Sie den Namen in der ts-Datei in

keywords = [];

Dies funktioniert auch mit Stackblitz-Code: - https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html

6
crystalthinker