小编Ale*_*FF1的帖子

我有一个父组件,里面有一个子组件.父组件有一些css类,其中子组件扩展它们.我尝试使用:host作为查看文档,但似乎无法让它正常工作.

子组件:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件:

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim …

如何重新格式化时间06:31:04以仅显示hh:mm - 06:31

试过

$scope.date = '06:31:04';

<p ng-bind="date | date:'HH:mm'"></p>

但时间不格式化

我应该怎么做,谢谢

我在 div *ngFor 循环中有项目，它在所选消息上应用 css 类“message-list-active”。

应用程序.html

 <div  id="listText" *ngFor="let message of messages; let i=index" activeIndex = i" 
   [ngClass]="{'message-list-active': activeIndex === i  }">
      {{message.name}}
 </div>

component.ts //使用上下箭头选择消息监听键盘事件

  messages;  // we have date stored here
  activeIndex = 0;


  @HostListener("document:keydown", ['$event']) 
   doSomething(event: KeyboardEvent): void {


  if (event.code == "ArrowUp" && this.activeIndex > 0) {
    this.activeIndex--

   }
  if (event.code == "ArrowDown" && this.activeIndex < this.messages.length-1) {
    this.activeIndex++

  }
 }

应用程序.css

    #listText {
        width: auto;
        height:100%;
        overflow: auto
      }

     .message-list-active {
        margin: 0;
        padding: …

我有 svg 图标svgIcon 的来源。我需要将此图标添加到按钮上。它看起来与这个非常相似

我试过这个：

css

  .btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-repeat: repeat-y;
       }

   <button class="btn"> Save</button>

但结果是这样的：

如何在按钮内放置 svg 图标并在其旁边放置文字说明？

我有一个对象数组,我必须循环并按属性名称"tagColor"分组重复值,然后我需要按名称排序的分组对象.我实现了按颜色排序的第一步,现在我需要按名称对这些组进行排序,在angular 4,typescript中实现

这是数组列表

 tags =    [
      {
        "tagType": {
          "name": "a",
          "tagColor": "#0000FF"
        }
      },
      {

        "tagType": {
          "name": "a",
          "tagColor": "#FF0000"
        }
      },
      {

        "tagType": {
          "name": "c",
          "tagColor": "#FF0000",
        }
      },
      {
        "tagType": {
          "name": "b",
          "tagColor": "#FF0000",
        }
      },
      {
        "tagType": {
          "name": "b",
          "tagColor": "#0000FF",
        }
      }
    ]

我的函数按tagColor排序:

tags.sort((a, b) => a.tagType.tagColor.localeCompare(b.tagType.tagColor));

这个仅按颜色分组,但如何按字母顺序对这些组进行排序？

我有一个数组,其中包含对象数组.我需要提取具有对象的项的属性值"id".

数组示例:

let myArray = [
    [ {id: "1"}, {id: "2"} ],
    [],
    [],
    [ {id: "3"} ]
]

如何提取和创建这样的数组:

["1", "2", "3"]

我试过这个:

tagIds = myArray.map(id =>{id})

例如，如何路由到相同的组件，但使用不同的URL和不同的数据

/exports/open  -  ExportsListComponent data: {exportstatus: 'open'}

/exports/submitted - ExportsListComponent data: {exportstatus: 'submitted'}

/exports/completed - ExportsListComponent data: {exportstatus: 'completed'}

这是我尝试做的事情，也有其他使用ExportComponent的路由，但具有类似export /：exportId的路由。

      { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports', component: ExportsListComponent,
      children: [
        { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
        { path: 'submitted', component: ExportsListComponent, …