Angular mat-chip-list 大小不正确，芯片位于输入区域

Question

Apologies for the bad title, I have a myriad of issues that need work.

I am not a web dev, this is the first time working with Angular, and Typescript, so I am not sure even how to articulate the problems correctly, or even if I am giving you the right information.

So, for starters, my input area should be 15 px by 150px, but it is showing as 108px by 150px. Here is my css.

.manual-work-entry {
margin-top: 1em;

.entry-row {
    height: 40px;
}

.input-small {
    width: 100px;
    margin: 0;
    padding: 1px;

    mat-chip {
        height: 22px;
        font-size: 11px;
        width: 85px;

        div {
            width: 100%;
        }
    }
}

::ng-deep .lower .mat-form-field-underline {
    bottom: 0 !important;
}

::ng-deep .mat-chip-input {
    .mat-form-field {
        .mat-input-infix,
        .mat-form-field-infix,
        .mat-chip-input {
            width: auto;
            height: 15px !important;
        }

        .mat-chip-input {
            flex: 1 1 auto;
        }
    }
}
}

Second, when I input a value for a chip, it shows above the input box, pushing it down. I want them to show below the box.

Third, when I press enter, I want the value I just typed in to vanish from the input box. I ho idea how to do that.

Fourth, when I hit backspace, I can keep going past the input values, and delete chips. Is this supposed to happen? I don't think it is, but I am not proficient enough in Angular to know.

Here is a chunk of the afflicted HTML code.

<mat-form-field class="input-small">
                                                    <mat-chip-list #additionalPartNumberCL
                                                                   class="mat-chip-list-stacked">
                                                        <mat-chip *ngFor="let number of additionalPartNumbers"
                                                                  [selectable]="true"
                                                                  [removable]="true"
                                                                  (removed)="removeMatChip($event, number, 'additionalPartNumbers')">
                                                            <div>
                                                                {{number}}
                                                            </div>
                                                            <mat-icon matChipRemove>cancel</mat-icon>
                                                        </mat-chip>
                                                        <input placeholder="Additional Part Numbers (optional)"
                                                               [matChipInputFor]="additionalPartNumberCL"
                                                               (matChipInputTokenEnd)="addMatChip($event, 'additionalPartNumbers')">
                                                    </mat-chip-list>
                                                </mat-form-field>

And the corresponding typescript for addMatChip

    public addMatChip(event: any, varName: string): void {
    const value = (event.value || "").trim();

    // this allows us to input the same value multiple times
    switch (varName) {
        case "additionalPartNumbers": {
            this.additionalPartNumbers.push(value);
            break;
        }
//removing extra code
    }

    // reset the input value
    if (event.value) {
        event.value = "";
    }
}

and the removeMatChip code

public removeMatChip(event: any, partNumber: string, varName: string): void {
    const value = partNumber;

    switch (varName) {
        case "additionalPartNumbers": {
            const index = this.additionalPartNumbers.indexOf(value);
            if (index >= 0) {
                this.additionalPartNumbers.splice(index, 1);
            }
            break;
//remove useless code
        }
    }
}

Any suggestions for improving my code?

Answer 1

I fixed issue 1 and 2 by moving the input to above the mat-chip-list.

Issue 3 was solved by adding an event.input.value = ""; to the if(event.value) in the add function.

I am still working on issue 4.

Answer 2

You can add custom css in the file style.css. first you should try to find out the class from dev tools then you can apply the css to that list.