Angular 2 /根據數據列表中的選擇創建列表

Question

我在尋找的角2的方式來做到這

但是，我不僅要有輸入值，還要從數據列表中選擇值。

到目前為止，這就是我所擁有的，但是我寧願每個選擇都在輸入區域下方創建一個單獨的列表項。 任何幫助表示贊賞。

<h2>Categories</h2>
        <ul>
            <li *ngFor="let cat of categories; let i = index">
                <input class="category" id="project_category_{{cat.category_id}}" [(ngModel)]="cat.name" list="categories">
                <datalist id="categories">
                    <option  *ngFor="let ct of category_list" value="{{ct.name}}">
                </datalist>
                <button class="material-icons btn" (click)="deleteProjectCategory(i)">clear</button>
            </li>
        </ul>

這是代碼：

addCategory() {
    let blank = {name: ''};
    this.categories.push(blank);
}
deleteProjectCategory(index: number) {
    const catId = this.categories[index]['category_id'];

    if (!catId) {
        this.categories.splice(index, 1);
        return;
    }

    this.projectsService.deleteProjectCategory(catId, this.id).subscribe(
        (results: any) => {
            if (results) {
                this.categories.splice(index, 1);
            }
        }, (error) => {
            // Error
            console.log(error);
        }
    );
}

Answer 1

以下代碼省略了刪除部分，僅關注附加功能。

component.html看起來像

<h4>Project Categories</h4>

<input type="text" list="category-list" placeholder="Category to add"
       [(ngModel)]="nameToAdd" />
<datalist id="category-list">
    <option *ngFor="let cat of categoryList" value="{{cat.name}}"></option>
</datalist>
<input type="button" value="Add" (click)="add();" />

<ul>
    <li *ngFor="let cat of categories">{{cat.name}}</li>
</ul>

以下是它的組件類。

export class SelectionListComponent implements OnInit {

    id : number;
    categories : Category[];
    allCategories: Category[];
    categoryList : Category[];

    @Input() @Output() nameToAdd : string;

    constructor(public projectsService: ProjectsService) { }

    ngOnInit() {
        id = +this.route.snapshot.paramMap.get('id');
        this.projectsService.getProjectCategories().subscribe(p => {
            this.categories = p;
            this.projectsService.getCategories().subscribe(a => {
                this.allCategories = a;
                this.search();
            });
        });
    }

    search(): void {
        if (!this.nameToAdd) this.nameToAdd = "";
        this.categoryList = this.allCategories.filter(c =>
            c.name.toLowerCase().includes(this.nameToAdd.toLowerCase())
            && this.categories.filter(c2 => c2.id === c.id).length == 0);
    }

    add(): void {
        let cat = this.categoryList.filter(c => c.name === this.nameToAdd)[0];
        this.nameToAdd = "";
        if (cat) {
            this.projectsService.addProjectCategory(cat.id, this.id).subscribe(() => {
                this.projectsService.getProjectCategories().subscribe(p => {
                    this.categories = p;
                    this.search();
                });
            });
        }
    }
}

但是，以上代碼基於類別名稱唯一的假設。 這是因為它使用，其中在選擇名稱時無法傳遞ID。

如果您不想按類別名稱處理它，請改用。

<select [(ngModel)]="idToAdd">
    <option *ngFor="let cat of categoryList" value="{{cat.id}}">{{cat.name}}</option>
</select>

並在元件分類中進行一些更改。 新增物業

@Input() @Output() idToAdd : number | undefined;

並修改add方法的第一行

let cat = this.categoryList.filter(c => c.name === this.nameToAdd)[0];

如果您不喜歡組合框的外觀，那么使用UL / LI（或類似方式）通過CSS格式化來創建自定義下拉UI則是另一種方式。

這已經是一個很長的答案，因此我省略了示例代碼。 如果您對此感興趣，請問我。 我可以放代碼。