为这个糟糕的标题道歉，我有无数的问题需要解决。
我不是一个网络开发人员，这是第一次使用Angular ，和 typescript ，所以我甚至不知道如何正确地阐明问题，或者即使我给你正确的信息。
所以，对于初学者，我的输入区域应该是15px乘150px，但它显示为108px乘150px。

这是我的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;
        }
    }
}
}

第二，当我为一个芯片输入一个值时，它显示在输入框的上方，向下推。我希望它们显示在框的下方。

第三，当我按回车键时，我希望我刚刚输入的值从输入框中消失。我不知道怎么做。
第四，当我按退格键时，我可以继续跳过输入值，并删除芯片。这是应该发生的吗？我不认为这是，但我不够精通Angular 知道。
下面是一段受影响的HTML代码。

<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>

以及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 = "";
    }
}

和removeMatChip代码

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
        }
    }
}

有什么改进代码的建议吗？