Question

为这个不好的头衔表示歉意，我遇到了很多需要解决的问题。

我不是网络开发人员，这是第一次使用Angular和Typescript，因此，即使是如何正确地表达问题，或者即使我给了您正确的信息，我也不确定。

因此，对于初学者来说，我的输入区域应为15像素x 150像素，但显示为108像素x 150像素。这是我的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;
        }
    }
}
}

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

第三，当我按Enter键时，我希望输入的值在输入框中消失。我知道该怎么做。

第四，当我按下退格键时，我可以继续越过输入值并删除筹码。这应该发生吗？我认为不是，但是我对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
        }
    }
}

有任何改进我的代码的建议吗？

Answer 1

我通过将输入移到芯片列表上方来解决问题1和2。

问题3通过在add函数的event.input.value = "";上添加if(event.value)来解决。

我仍在研究问题4。

角垫芯片列表大小不正确，芯片位于输入区域

1 个答案: