小编Ste*_*eve的帖子

当我搜索这个时,我看到很多关于使用ngFor的答案,但我理解ngFor.我问的angular.forEach()是我的Angular 1控制器中使用的构造函数.这些标记为TS中的错误,不进行编译.

例如,我有一个嵌套循环:

 _this.selectChildren = function (data, $event) {
  var parentChecked = data.checked;
  angular.forEach(_this.hierarchicalData, function (value, key) {
    angular.forEach(value.children, function (value, key) {
      value.checked = parentChecked;
    });
  });
};

这个构造在Angular 4的Typescript中是什么样的？

我试图在Angular 6中创建一个具有多槽插入的组件,这篇博文(适用于Angular 2).

我创建了一个组件:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-criteria',
  template: `
  <div class="adoption-grid-column adopter">
  <div class="adoption-grid-icon ">
    <ng-content select="level-icon"></ng-content>
  </div>

  <div class="adoption-grid-body">
    <ng-content select="level-description"></ng-content>
  </div>

</div>
`,
  styles: []
})
export class CriteriaComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

然后我试着像这样使用它

<app-criteria>
    <level-icon>
        foo
    </level-icon>
    <level-description>
        bar
    </level-description>
</app-criteria>

但它抛出了编译错误:

ERROR in : 'level-icon' is not a known element

我在这里错过了什么？

我意识到我可以在这里创建子组件,但我正在寻找一种解决方案,我可以将html块传递到组件中的插槽(例如项目符号列表,图像等)

gulpFile我的团队中有其他人创建了以下任务:

gulp.task('serve', [], function(){
   gulp.run(
    'fonts',
    'browsersync',
    'watch'
  );
});

我想不管它,但我也想将默认任务映射到此任务.所以我尝试过:

gulp.task('default',['serve']);

它似乎工作,因为服务器运行,但由于某种原因,"监视"任务没有发生,我没有得到浏览器刷新更改.

如果我运行"gulp serve"而不是"gulp",这一切都按计划运行.我做错了什么？

编辑: 这是监视任务:

gulp.task('watch', ['styles', 'browsersync'], function() { //'default'
  gulp.watch(
    [
      './app/assets/sass/**/*.scss',
      './app/modules/**/*.scss'
    ], ['styles']);

  gulp.watch([
    './app/**/*.js',
    './app/**/*.html'
  ], function() {
    reload();
  });

});

我有下表有3个复选框.我为每个人分配了自己的模型.

我有一个我想要被禁用的按钮,除非3个复选框模型中的任何一个都是真的.

但是我很困惑,因为我期望使用

<button " ng-disabled="!mt0 || !mt1 || !mt2">Reassign</button>

因为如果其中任何一个是真的,则不应禁用该按钮.

然而,相反的工作:

<button ng-disabled="!mt0 && !mt1 && !mt2">Reassign</button>

为什么？

请参阅此处的plnkr:http://plnkr.co/edit/yURa3g0aNjDyfEvjK2D0？p = preview

我经常需要使用步骤指示来显示用户所在的步骤，或者包裹在运输途中的进度等。

像这样：

这是由一个无序列表的 HTML 列表组成的。

        <ul class="progress-tracker progress-tracker--text progress-tracker--center">
          <li class="progress-step is-complete">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 1</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step is-complete">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 2</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step is-active">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 3</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 4</h4>
              Shorter summary …

我从一个从json端点获取数据的解析器获得了一个"产品"数组.

ngOnInit() {
  this.products = this._route.snapshot.data.products;
  console.log('products: ', this.products);
}

其中一个对象中的一个对象是格式

 {
    "id": 3645,
    "date": "2018-07-05T13:13:37",
    "date_gmt": "2018-07-05T13:13:37",
    "guid": {
        "rendered": ""
    },
    "modified": "2018-07-05T13:13:37",
    "modified_gmt": "2018-07-05T13:13:37",
    "slug": "vpwin",
    "status": "publish",
    "type": "matrix",
    "link": "",
    "title": {
        "rendered": "VPWIN"
    },
    "content": {
        "rendered": "",
        "protected": false
    },
    "featured_media": 0,
    "parent": 0,
    "template": "",
    "better_featured_image": null,
    "acf": {
        "domain": "SMB",
        "ds_rating": "3",
        "dt_rating": ""
    },
    ...
},

我想要做的是按字段对此数组进行排序 title.rendered

在古代,在AngularJS中,我只是orderBy在模板集中使用一个管道到这个字段.显然,这在Angular中已被删除,而且在进行研究时,似乎首选方法是对数据本身进行排序,例如ngOnInit.

但我无法弄清楚如何排序products的producs.title.rendered.

我有一个JSON对象,表示如下:

 {
  "orders" : [
    {
      "ordernum" : "PRAAA000000177800601",
      "buyer" : "Donna Heywood"
      "parcels" : [
        {
          "upid" : "UPID567890123456",
          "tpid" : "TPID789456789485"
        },
        {
          "upid" : "UPID586905486090",
          "tpid" : "TPID343454645455"          
        }
      ]
    },
    {
      "ordernum" : "ORAAA000000367567345",
      "buyer" : "Melanie Daniels"
      "parcels" : [
        {
          "upid" : "UPID456547347776",
          "tpid" : "TPID645896579688"
        },
        {
          "upid" : "UPID768577673366",
          "tpid" : "TPID784574333345"
        }
      ]
    }
  ]
}

我需要在第二级做一个转发器,一个"upid"号码列表.

我知道如何获得最高级别

<li ng-repeat="o in orders">{{o.ordernum}}</li>

但我不清楚顺序循环一个级别.例如,这是错误的:

<li ng-repeat="p in orders.parcels">{{p.upid}}</li>

我也知道如何嵌套 …

我有一个组件，其模板允许 2 个内容区域：文本和“阅读更多”文本。如果组件的使用者为“阅读更多”文本添加区域，我想显示最终用户单击以显示文本的“阅读更多”链接。如果他们不包含/不需要任何“阅读更多”文本，我不想显示链接。

如何检测模板区域的存在，并根据ngIf?

例如，html 可能是：

<app-promohero-message-unit title="Title for messaging module">
     <div description>
       Include a short, informative description here.
     </div>
     <div readmoretext>
       If you need to add more detail, include another sentence or two it in this section.
     </div>
</app-promohero-message-unit>

显然，他们可能不需要readmoretext，所以如果他们省略了它，我不应该显示 readmore 链接。

到目前为止，组件代码是：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-promohero-message-unit',
  template: `
    <div>
      <h3 class="text-white">{{ title }}</h3>
      <p class="text-white">
        <ng-content select="[description]"></ng-content>
      </p>
      <p class="text-white" *ngIf="readMore">
        <ng-content select="[readmoretext]"></ng-content>
      </p>
    </div>
    <p>
      <a class="text-white" …

Bootstrap 3.x中是否有内置方式来设置/删除类似"text-right"的类？

例如,我有一个列<div class="col-md-6 text-right">但是在xs大小我不希望文本权限适用.

我知道如何使用我自己的类/媒体查询来做这件事,但想知道是否有一些简单的内置.

styles我的gulpfile中有一个任务:

gulp.task('styles', function () {
  var sass = require('gulp-ruby-sass');
  var autoprefixer = require('gulp-autoprefixer');
    return gulp.src('app/styles/main.scss')
    .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('.tmp/styles'));
});

在控制台中生成这个:

[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is    deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
  write main.css.map

  events.js:72
    throw er; // Unhandled 'error' event …