Question

chip.component.ts

    import { Component, OnInit } from '@angular/core';
    import { MatChipInputEvent } from '@angular/material';
    import {ENTER, COMMA} from '@angular/cdk/keycodes';


    @Component({
    selector: 'app-chip',
    templateUrl: './chip.component.html',
    styleUrls: ['./chip.component.css']
    })
    export class ChipComponent {
    constructor() { }
    visible: boolean = true;
    selectable: boolean = true;
    removable: boolean = true;
    addOnBlur: boolean = true;

    // Enter, comma
    separatorKeysCodes = [ENTER, COMMA];

    keywords = [];


    add(event: MatChipInputEvent): void {
        let input = event.input;
        let value = event.value;

        // Add our keyword
        if ((value || '').trim()) {
        this.keywords.push(value.trim());
        }

        // Reset the input value
        if (input) {
        input.value = '';
        }
    }

    remove(keyword: any): void {
        let index = this.keywords.indexOf(keyword);

        if (index >= 0) {
        this.keywords.splice(index, 1);
        }
    }

    }

chip.component.html

    <mat-form-field class="demo-chip-list">
    <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>

控制台错误：

    Uncaught Error: Template parse errors:
    Can't bind to 'selectable' since it isn't a known property of 'mat-chip'.
    1. If 'mat-chip' is an Angular component and it has 'selectable' input, then verify that it is part of this module.
    2. If 'mat-chip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" class="demo-chip-list">
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let keyword of keywords" [ERROR ->][selectable]="selectable"
                [removable]="removable" (remove)="remove(keyword)">
        {{ke"): ng:///AppModule/ChipComponent.html@2:47
    Can't bind to 'removable' since it isn't a known property of 'mat-chip'.
    1. If 'mat-chip' is an Angular component and it has 'removable' input, then verify that it is part of this module.
    2. If 'mat-chip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("st #chipList>
        <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
                [ERROR ->][removable]="removable" (remove)="remove(keyword)">
        {{keyword}}
        <mat-icon matChipRemove *"): ng:///AppModule/ChipComponent.html@3:13
    'mat-icon' is not a known element:
    1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
    2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
                [removable]="removable" (remove)="remove(keyword)">
        {{keyword}}
        [ERROR ->]<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input placeholder="K"): ng:///AppModule/ChipComponent.html@5:6
    'mat-chip' is not a known element:
    1. If 'mat-chip' is an Angular component, then verify that it is part of this module.
    2. If 'mat-chip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-form-field class="demo-chip-list">
    <mat-chip-list #chipList>
        [ERROR ->]<mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
                [removable]="remova"): ng:///AppModule/ChipComponent.html@2:4
    Can't bind to 'matChipInputFor' since it isn't a known property of 'input'. ("
        </mat-chip>
        <input placeholder="Keywords"
            [ERROR ->][matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            "): ng:///AppModule/ChipComponent.html@8:11
    Can't bind to 'matChipInputSeparatorKeyCodes' since it isn't a known property of 'input'. ("
        <input placeholder="Keywords"
            [matChipInputFor]="chipList"
            [ERROR ->][matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [matChipInputAddOnBlur]="addOnBlur"
    "): ng:///AppModule/ChipComponent.html@9:11
    Can't bind to 'matChipInputAddOnBlur' since it isn't a known property of 'input'. ("ChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [ERROR ->][matChipInputAddOnBlur]="addOnBlur"
            (matChipInputTokenEnd)="add($event)" />
    </mat-chip-l"): ng:///AppModule/ChipComponent.html@10:11
    'mat-chip-list' is not a known element:
    1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
    2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-form-field class="demo-chip-list">
    [ERROR ->]<mat-chip-list #chipList>
        <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
    "): ng:///AppModule/ChipComponent.html@1:2
    'mat-form-field' is not a known element:
    1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
    2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field class="demo-chip-list">
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let keyword"): ng:///AppModule/ChipComponent.html@0:0
        at syntaxError (compiler.js:2426)
        at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
        at compiler.js:26076
        at Set.forEach (<anonymous>)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
        at compiler.js:25986
        at Object.then (compiler.js:2417)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents

在这里，我正在尝试整合角度材料 MatChipInputEvent 在我的终端中，编译成功，但在控制台中，显示模板解析错误。

我错过了其他任何进口商品吗？

我在角度文档中也做了同样的事情。

请看看。

Answer 1

您应该在应用模块中执行此操作：“从'@ angular / material / chips'导入{MatChipsModule}“

Answer 2

使用Angular Material组件时，必须在相关模块内添加导入。

import {..., MatChipsModule} from '@angular/material';
...

@NgModule({
    declarations                                                            : [
        ...
    ], imports: [
        ..., MatChipsModule
    ], providers: [
        ...
    ], exports: [
        ...
    ]
})
export class MyModule {}

控制台中的角度材料MatChipInputEvent错误

2 个答案: