Question

我正在寻找Angular 2的this方法

但是，我不仅要有输入值，还要从数据列表中选择值。

到目前为止，这就是我所拥有的，但是我宁愿每个选择都在输入区域下方创建一个单独的列表项。任何帮助表示赞赏。

<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是另一种方法。

这已经是一个很长的答案，因此我省略了示例代码。如果您对此感兴趣，请问我。我可以输入代码。

Angular 2 /根据数据列表中的选择创建列表

1 个答案: