小编Mui*_*rik的帖子

上周，我成功地让 Output() 和 EventEmitter() 在我的 Angular 应用程序中正常工作。但今天我在尝试在另一种情况下实现这一点时遇到了问题。不知道我错过了什么。

首先，在处理应用于记录列表的过滤器的子组件中，我有以下内容：

@Output() sendFilter = new EventEmitter();

optionClicked(option) {
    this.sendFilter.emit(option);
    console.log('Filter from filters comp is: ' + option.toolbarLabel);
    this.option = option;
}

该过滤器组件的视图如下所示：

<md-checkbox *ngFor="let option of categoryFilters.options" 
   [(ngModel)]="option.value" (click)="optionClicked(option)">
   {{option.label}}
</md-checkbox>

所以我使用“sendFilter”来发出“选项”。然后，在我的其他组件中，我假设应该接收/传递该值到该函数中：

optionReceived(option) {
    console.log('Consulting: ' + option.toolbarLabel);
}

在这个组件的视图中我有这个：

<list-display [records]="records" (sendChange)="pageChange($event)" (sendFilter)="optionReceived(option)"></list-display>

但是，只有过滤器组件上的事件才会记录到控制台。我上面的 console.log 永远不会发生。“optionReceived()”函数不应该在过滤器组件发出新信号时自动触发吗？

我什至尝试将“optionClicked(option)”添加到 Angular 的 OnChanges 生命周期挂钩中：

ngOnChanges(option) {
    this.optionReceived(option.toolbarLabel);
}

...但仍然没有任何内容从该组件记录到控制台。

我在这里缺少什么？

我在Angular应用程序中成功使用了Observables.到目前为止,我已经在组件中明确订阅,然后使用*ngFor迭代视图中的记录数组.现在我想通过在各种视图中使用Angular的异步管道来简化事情 - 这样就可以处理订阅和取消订阅.到目前为止,这是行不通的.

这就是我原来的(我在组件中订阅的地方):

ngOnInit() {
    this.clientService.getAll(1, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            console.log(this.records);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

然后在视图中我做了以下事情:

<tr *ngFor="let record of records.data>

顺便说一句,来自API的数据结构看起来像这样(我正在迭代的记录在"data"数组中,因此在上面的*ngFor中的"records.data"):

{
  "count": 15298,
  "data": [
    {

因此,为了转向使用异步管道,我将组件ngOnInit调用更改为this,其中我明确声明这是一个可观察的,并将其分配给变量"records":

ngOnInit() {
    const records: Observable<any> = this.clientsService.getAll(1, this.pagesize);
    console.log(this.records);
}

我还将来自RxJs的可观察导入带入了组件,如下所示:

import { Observable } from 'rxjs/Observable';

然后在视图中我添加了异步管道,如下所示:

<tr *ngFor="let record of records.data | async">

正如我所提到的,这是行不通的.我没有收到任何控制台错误,我只是没有看到填充到视图的任何数据.此外,在控制台中,"records"是一个空数组.

顺便说一句,我的服务"getAll"调用如下所示:

getAll(page, pagesize) {
    return this.http.get
    (`https://api.someurl.com/${this.ver}/clients?apikey=${this.key}&page=${page}&pagesize=${pagesize}`)
        .map((response: Response) => response.json())
        .catch(this.errorHandler);
}
    errorHandler(error: Response) {
    console.error(error);
    return …

我在Angular应用程序上设置了一个排序过滤器，该过滤器通过md-radio-group使用单选按钮，以便用户可以在数据表显示中选择首选的排序方法。单选按钮按预期工作。但是，我还有一个“恢复默认值”按钮，可以用来清除所有单选按钮选择并返回默认排序。到目前为止，我很难清除单选按钮。

这是我的视图代码如下所示：

    <filter-option name="Sort"
            placeholder="Select Sorting Option"
            [usePlaceholder]="!value"
            [visible]="sortFilters.enabled">
        <filter-label>{{value | capitalize}}</filter-label>
        <filter-menu>
            <md-radio-group class="mat-radio-label-content">
                <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
                    Alphabetical
                </md-radio-button>
                <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
                    Reverse Alphabetical
                </md-radio-button>
                <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
                    Numeric ID
                </md-radio-button>
            </md-radio-group>
            <button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>
        </filter-menu>
    </filter-option>

在我的组件中，这具有初始化过滤器的功能：

sortFilters =
{
    enabled: true,
    value: false
};

这是按钮上附带的用于清除排序过滤器的功能：

clearSortingFilters()
{
    this.sendSort.emit(this.value = '');
}

现在，在上面的功能中，this.sendSort.emit(this.value = '')完成清除显示在过滤器标签区域中的选择。但是，如何清除md-radio-group单选按钮选择呢？

在我的 Angular 2 应用程序中，我有一个选项卡区域，用户可以在其中从一组独立但上下文相关的组件中进行选择。当他们点击这些链接之一时，相关组件会根据 routerLink 中定义的内容加载，如下所示：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

这工作得很好。但是，从那时起，我们构建了应用程序以将各种用户选择的过滤器选择保存为 URL 中的参数。这样，当他们重新加载组件时，他们最近的选择仍然可见并应用于数据。因此，在用户进行了一些过滤器选择后，URL 可能如下所示：

http://somesite.com/page1;language_filter=true;language_selection=English

用于此的组件代码如下所示：

public changePage(page, value, type, body)
{
    this.onUserSelection(value, type, body, page);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.language_filter = params['language_filter'];
            this.language_selection = params['language_selection'];
        }
    );
    this.router.navigate(
        ['/page1', {
            page: page,
            language_filter: this.language_filter,
            language_selection: this.language_selection,
        }]);
}

这适用于主要导航方法，这些方法是通过路由文件完成的，其中每个方法如下所示：

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }

但是，对于我提到的这个选项卡区域，它根据硬编码的 routerLink 参数加载组件。所以我现在意识到，当用户以这种方式返回到组件时，而不是通过我们提供的其他方式之一，它实际上覆盖了 URL 参数——因为它实际上是在加载“page1”——因为这个<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

...因此之前添加的 URL 参数被删除。

所以，我的问题是，有没有办法编辑此代码： …

简单的Angular 2问题：为什么在将RouterStateSnapshot注入到我的登录组件中的构造函数中时，为什么会出现DI（依赖项注入）错误？我试图在注销之前获取该url，因此可以在用户重新登录时将其传递给它（这样它将加载其上次访问的组件/页面）。事实证明，这比我预期的要困难得多。即使将其导入并包含在我的构造函数中的RouterStateSnapshot之后，我仍然遇到DI错误。这是我在登录组件中进行设置的方式：

import { ActivatedRoute, ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';

constructor(private router: Router,
            private route: ActivatedRoute,
            private authenticationService: AuthenticationService,
            private alertService: AlertService,
            private state: RouterStateSnapshot,
            private authGuardService: AuthGuardService,
            private idle: Idle)
{

这是什么问题 RouterStateSnapshot与ActivatedRoute，ActivatedRouteSnapshot等不同，我缺少什么？我可以毫无问题地将其导入和注入？为什么不能以相同方式注入RouterStateSnapshot？

顺便说一下，我可以在我的authGuardService中使用RouterStateSnapshot而不出现问题。它正在我的canActivate（）函数中使用-并返回正确的结果。那么在这种情况下有什么不同？为什么我不能在我的登录组件中使用它？

在我的Angular应用程序中,我有一个过滤功能,可以跟踪用户输入的过滤器值,以及这些过滤器值当前是否已启用/活动.我正在初始化这些过滤器,如下所示:

filters = { language: [], location: [], zipArray: [], firstName: [], lastName: [] };

我在这部分代码中遇到了一个Typescript错误 - 特别是这一行: return this.filters.zipArray = [];

public onZipcodeEnabledChange(enabled): void {
    this.filters.zipArray = this.getZipcodeArray();
    if (!enabled || this.filters.zipArray && this.filters.zipArray[0] === ''){
        return this.filters.zipArray = [];
    }
}

我得到的TypeScript错误是:

类型'undefined []'不能分配给'void'类型.

我不明白这里的问题是什么？

我知道我可以使用reduce 来对数组的数字求和，如下所示：

let numArray = [1, 2, 3, 4].reduce((a, b) => a + b, 0);
console.log(numArray);

但是，如果我有一个对象数组，其中一个字段的值为数字，我将如何获取数组中对象的该字段的总和？

对于这种数据结构来说例如：

[
  {
    name: "John Smith",
    balance: 42
  },
  {
    name: "Jane Doe",
    balance: 24
  }
]

我将如何使用reduce来获取数组中所有对象的“余额”字段的总和？

我试图在我的 MongoDB 后端使用 Mongoosepre和post钩子，以便比较文档在保存前和保存后的状态，以便根据更改的内容触发其他一些事件。但是到目前为止，我无法通过 Mongoosepre挂钩获取文档。

根据文档“预挂钩对 doc.save() 和 doc.update() 都有效。在这两种情况下，这都是指文档本身......”。所以我这就是我尝试过的。首先在我的模型/模式中，我有以下代码：

let Schema = mongoose
  .Schema(CustomerSchema, {
    timestamps: true
  })
  .pre("findOneAndUpdate", function(next) {
    trigger.preSave(next);
  })
  // other hooks
}

...然后在我的触发器文件中，我有以下代码：

exports.preSave = function(next) {
  console.log("this: ", this);
  }
};

但这是记录到控制台的内容：

这：{ preSave: [Function], postSave: [AsyncFunction] }

所以很明显这是行不通的。这并没有像我希望的那样注销文档。为什么this文档本身不在这里，因为文档本身似乎表明了这一点？有没有办法可以用pre钩子抓住文档？如果没有，人们是否有另一种方法来实现这一目标？

我正在养成根据上下文将我的一些内容转换for loops为使用的习惯array.find()。在这样做时，我想知道是否有一种方法可以在 之后链接另一个操作符，.find()以限制我从对象中获取的数量。

例如，请参阅以下内容：

currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage.name;

由于我真正想要的只是“currentStage.name”的值，有没有一种方法可以通过在 my find(), 后面链接来指定我只想要这个属性来获得这个值？如果没有，是否有另一种方法可以在一行中完成此操作？

在我的 MongoDB 后端中，我想创建一个端点，该端点返回名为department. 现在，如果我在 IntelliShell 中执行此操作，我会执行以下操作：

db.staffmembers.distinct( "department" )

这将返回一个包含所有值的数组department。

但是如何在像这样的 Mongoose find() 查询中返回所有唯一值？

Staffmember.find({ name: 'john', age: { $gte: 18 }});

换句话说，如果我想使用find()上面的like 来返回department“staffmembers”集合中的所有唯一值，语法会是什么样的？