Kendo UI 芯片在本地环境中缺少边界答案

【问题标题】：KendoUI chips are missing the border in local environmentKendo UI 芯片在本地环境中缺少边界
【发布时间】：2021-02-18 18:11:46
【问题描述】：

我在stackblitz 中运行 kendo 的测试代码，它运行良好：

但是当我在 localhost 上运行它时，它缺少芯片的所有样式：

它看起来像一个块，需要帮助找出为什么会发生这种情况。到目前为止，我无法重现 stackblitz 中的错误。

到目前为止的故障排除：

我停止了本地主机并尝试了npm i; npm start。
我比较了 local 和 stackblitz 中的所有依赖项，它们都在 package.json 文件中

component.ts 文件


import { Component,  ViewChild, ViewEncapsulation } from '@angular/core';
import { ChipRemoveEvent } from '@progress/kendo-angular-buttons';
import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  selector: 'sentryx-email-chips',
  templateUrl: './email-chips.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./email-chips.component.scss']
})
export class EmailChipsComponent {
  @ViewChild("contactslist") public list: AutoCompleteComponent;

  public contacts: Array<{ label: string; iconClass: string }> = [
    { label: "Pedro Afonso", iconClass: "k-chip-avatar" },
    { label: "Maria Shore", iconClass: "k-chip-avatar" },
    { label: "Thomas Hardy", iconClass: "k-chip-avatar" },
    { label: "Christina Berg", iconClass: "k-chip-avatar" },
    { label: "Paula Wilson", iconClass: "k-chip-avatar" }
  ];

  public selectedContacts: Array<any> = [this.contacts[1]];

  public valueChange(contact: string): void {
    console.log(contact);
    if (contact === "") {
      return;
    }

    this.selectedContacts.push({
      label: contact,
      class: `custom-style`
    });

    // const contactData = this.contacts.find(c => c.label === contact);

    // if (!this.selectedContacts.includes(contactData)) {
    //   this.selectedContacts.push(contactData);
    // } else {
    //   this.selectedContacts.push({
    //     label: contact,
    //     iconClass: "k-chip-avatar paula"
    //   });
    // }

    this.list.reset();
  }

  public onRemove(e: ChipRemoveEvent): void {
    console.log("Remove event arguments: ", e);
    const index = this.selectedContacts
      .map(c => c.label)
      .indexOf(e.sender.label);
    this.selectedContacts.splice(index, 1);
  }

}

HTML：

<kendo-chip *ngFor="let contact of selectedContacts" [class]="contact.class" [label]="contact.label" [removable]="true"
  [iconClass]="contact.iconClass" (remove)="onRemove($event)">
</kendo-chip>
<div class="example">
  <kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
    [kendoDropDownFilter]="{ operator: 'contains' }" [filterable]="true" placeholder="To: Email Adress*"
    (valueChange)="valueChange($event)">
  </kendo-autocomplete>
</div>

CSS

.k-chip {
    margin-right: 10px;
  }
  .k-block {
    min-height: 300px;
    padding: 20px;
  }
  .k-textarea {
    width: 100%;
    min-height: 145px;
  }
  .contacts {
    border-width: 0 0 1px 0;
    width: 100%;
    margin: 30px 0;
  }
  .contacts.k-state-focused {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.03);
  }

  .custom-style {
    color: #6200ee;
    background-color: #f3ebfe;
    border-color: #6200ee;
  }

更新

其他剑道组件工作正常。就像上面的剑道下拉菜单一样。还测试了剑道按钮，它也可以正常工作 <button kendoButton >Browse</button>

【问题讨论】：

您是否包含了 Kendo CSS 文件，以及如何包含。页面上是否还有其他 Kendo 控件存在相同问题？
我用您所询问的详细信息更新了问题。但所有其他剑道组件的样式都正确。

标签： html css angular kendo-ui

【解决方案1】：

问题是样式表被导入到 index.html 中：

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>

即使从模块中导入剑道芯片，Angular 应用程序也缺少这些样式。

需要到style.css获取应用并添加行：

@import "~@progress/kendo-theme-bootstrap/scss/chip";

我还必须进入 node_modules 到进度包和里面的芯片进行测试。

【讨论】：