Angular Material Chips将显示在输入框下方-Java 学习之路

我正在使用Angular Material创建输入字段中输入的筹码 . 因此，文档examples中给出的当前默认行为是在输入框内显示芯片 . 我不想在我的输入字段中显示那些芯片我想要做的是当用户输入任何东西时，芯片应该在输入字段下创建（不在输入字段内） . 您可以通过任何示例链接帮助我 .

3 回答

1
实现它的最简单方法是使用CSS position属性 .

但实际上使用flexbox更好：https://codepen.io/avreddy/pen/ppzraz
```
.md-chips { 
  display: flex;
  flex-wrap: wrap;
} 
.md-chips md-chip{
  order: 2;
}
.md-chips .md-chip-input-container {
  order: 1;
  width: 100%;
}
```
回复于 2024-04-23T20:24:27+08:00

如果您查看Angular Material Chip示例，可以从mat-form-field中提取输入

Update: 如果重新排序example from the docs中的输入元素，则芯片将显示在输入下方（用户输入文本的位置），但仍然是组件的一部分：

<mat-form-field class="example-chip-list">
  <input placeholder="New fruit..."
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)">

  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
            [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

这可能无法让你完全按照你想象的那样，但我认为它符合你正在寻找的解决方案的精神 .

看到这个StackBlitz我从这个例子中调整过来 .

回复于 2024-04-23T20:24:27+08:00

我使用了一个输入组件，它将获取输入，然后将其添加到任何数组 . 然后我将这个数组传递给可以显示芯片的芯片组件 .

模板调用keyDown和blur来添加这两个事件的筹码 . 称为另一个显示芯片通过芯片阵列的组件 .

<form [formGroup]="form">
    <mat-form-field appearance="outline">
        <mat-label>Key Skills</mat-label>
        <input matInput placeholder="Skills" (keydown)="onAddSkills($event)" (blur)="onBlurMethod()" formControlName="keySkills" name="keySkills">
    </mat-form-field>
    <div class="chip-list">
        <chip-list [skills]="skills"></chip-list>
    </div>
</form>

此模板的组件

import {Component} from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

export interface Skills {
  name: string;
}

@Component({
  selector: 'key-skills',
  templateUrl: 'key-skills.component.html',
  styleUrls: ['key-skills.component.scss'],
})
export class KeySkillsComponent {
    skills: Skills[] = [];
    private form: FormGroup; 
    constructor(private fb: FormBuilder) { 
        this.form = this.fb.group({
            "keySkills": new FormControl()
    });
    }

  onAddSkills(event) {
    if (event.key === "Enter" || event.key===",") {
        this.addSkillsToArray(this.form.value['keySkills']);
    }
  }

  onBlurMethod() {
            this.addSkillsToArray(this.form.value['keySkills'])
  }

  addSkillsToArray(skill) {
    if ((skill || '').trim()) {
        this.skills.push({name: skill.trim()});
            }
        this.form.reset();
    event.preventDefault();
  }
}

芯片列表模板

<mat-chip-list>
    <mat-chip *ngFor="let skill of skills">
        {{skill.name}}
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

和组件

import {Component, Input} from '@angular/core';

@Component({
  selector: 'chip-list',
  templateUrl: 'chip-list.component.html',
  styleUrls: ['chip-list.component.scss'],
})
export class ChipListComponent {
    @Input() skills;
}

容易腻 . 所有这些的结果是：

回复于 2024-04-23T20:24:27+08:00

Angular Material Chips将显示在输入框下方

3 回答

相关问题