如何在 Angular 2 中设置 kendo-grid-message 样式答案

【问题标题】：How to style kendo-grid-message in Angular 2如何在 Angular 2 中设置 kendo-grid-message 样式
【发布时间】：2018-05-09 08:06:39
【问题描述】：

当没有可显示的记录时，它应该在网格中显示一条自定义消息，该消息将与 kendo-grid-message 一起显示，但我无法更改其样式

代码：

<kendo-grid-messages
[style]="{'background-color':'#666', 'height':'500px','width':'100%'}"
[class]="no-data"
noRecords="There are no items to display.">
</kendo-grid-messages>

plunker：https://plnkr.co/edit/iGLJ06zRVYWDYedAtsDW?p=preview 参考：我正在使用以下示例来设置 Kendo Grid 的样式。网址：https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles 谢谢

【问题讨论】：

尝试 [ngStyle] 而不是 [style]
是的，我也尝试过 [ngStyle]，但是控制台中没有显示错误，也没有应用样式

标签： angular kendo-grid

【解决方案1】：

我不熟悉 kendo-grid，但是如果您在包含 kendo-grid-messages 指令时查看生成的 html，您会发现它实际上创建了一个带有 k-grid-norecords 类的表格行，其中包含您的消息.这是您需要设置样式的这一行

尝试将其放入组件的 css 文件中

:host ::ng-deep .k-grid-norecords
{
    background-color:#666;
    height: 500px;
}

See edited plunkr

【讨论】：

嗨，你觉得你能回答这个问题吗？谢谢stackoverflow.com/questions/62464601/…

【解决方案2】：

创建一个条件元素。

<div *ngIf="noRecords"> message </div>

【讨论】：

【解决方案3】：

尝试使用混合样式和ngstyle。

<div style='display:none' ng-style='HideAndShow'></div> <!--By Default Hidden -->

AngularJS

$scope.HideAndShow["display"]="none"; //Initialize 

if(1==1)   //if Condition true to hide message
 $scope.HideAndShow["display"]="";
else //if condition false and display message
 $scope.HideAndShow["display"]="none";|

Angular2

HideAndShow()
{
   if(1===1) //If Condition to display message
   {
      let style={    //Other styles can be include after comma
           "display":"",            
      }
      return style;
   }
   else(1!===1)   //Condition to hide message
   {
          let style={    //Other styles can be include after comma
           "display":"none",            
      }
      return style;
   }
}

在视图中

<div [ngStyle]="HideAndShow()"/>

【讨论】：

OP 正在使用 angular2