小编Mui*_*rik的帖子

测试Angular 2应用程序时出现"CUSTOM_ELEMENTS_SCHEMA"错误

在为我的Angular 2应用程序编写测试时,我遇到了这些错误:我们正在使用的选择器:

"): AppComponent@12:35 'tab-view' is not a known element:
1. If 'my-tab' is an Angular component, then verify that it is part of this module.
2. If 'my-tab' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>
    <div class="app-body">
        [ERROR ->]<tab-view class="my-tab" [options]="tabOptions"></tab-view>
    </div> </div> 
Run Code Online (Sandbox Code Playgroud)

我已经添加CUSTOM_ELEMENTS_SCHEMA到我的根模块,以及所有其他模块,但我仍然得到错误.

  • 我还需要做什么?
  • 这需要在所有模块中,还是只在根目录中?
  • 还有什么需要补充的吗?

javascript unit-testing typescript angular

11
推荐指数
2
解决办法
8061
查看次数

我如何遍历一组 JS 对象并为每个对象打印一个语句?

var teams = [
                {
                  city: 'Vancouver',
                  nickname: 'Canucks',
                  league: 'NHL'
                },
                {
                  city: 'San Jose',
                  nickname: 'Earthquakes',
                  league: 'MLS'
                },
                {
                  city: 'Sacramento',
                  nickname: 'Kings',
                  league: 'NBA'
                }
                        ]

document.write("The " + this.city + " " + this.nickname + " play in the " + this.league);
Run Code Online (Sandbox Code Playgroud)

我想遍历每个并为每个打印上述语句。我怎么做最好?

javascript javascript-objects

10
推荐指数
1
解决办法
798
查看次数

获取错误:'无法分配到'location',因为它是一个常量或只读属性'与Angular app中的mailto函数

我正在尝试在我的Angular 2应用程序中设置一个功能,该功能将使用用户的默认电子邮件客户端发送一封电子邮件,其中包含一些预先填充的信息:

sendEmail() {
    this.title = document.title;
    this.title = this.title.replace("&", "-");
    window.location = "mailto:?body=" + this.title + " - " + window.location + "&subject=I thought this link might interest you.";
}
Run Code Online (Sandbox Code Playgroud)

但我遇到了一个问题,我收到了一个错误:

无法分配到"位置",因为它是常量或只读属性.webpack:编译失败.

我到目前为止看到的例子都描述了这样做,使用"window.location",那么我该如何解决这个问题呢?

javascript mailto typescript angular

8
推荐指数
1
解决办法
3876
查看次数

转换原始日期值后角度日期管道打印错误日期

我在我的 Angular 2 应用程序中使用 Angular 的日期管道,以便以更人性化的格式格式化日期。我能够从 API 中提取日期,并成功编辑这些日期并将其保存到 API。但是,我遇到了一个问题,即日期管道错误地转换了日期 - 就实际显示的内容而言。

澄清一下,如果我将原始日期打印到屏幕上,那是正确的。当我编辑通过日期管道传递的值时,会保存正确的日期。但是,在我进行编辑后,转换后的日期值再次更改(不是根据保存的内容,仅根据视图中显示的内容)--最终会稍微偏离,通常是一天左右. 因此,如果我将值编辑为 09/25/2010,它将被保存到数据库中,但视图中显示的是 09/24/2010。所以看起来时区的某种默认设置可能会导致问题?

这是我的视图代码的外观(我将首先列出通过日期管道传递的日期值,然后列出相同的值,但未通过日期管道传递)用于 dob - 出生日期:

<!-- DATE PASSED THROUGH DATE PIPE -->
    <input class="app-input" [ngModel]="member.dob | date:'MM/dd/yyyy'"
        (ngModelChange)="member.dob=$event" name="inputField" type="text" /> 

<!-- RAW VALUE PRINTED TO SCREEN -->
    <input class="app-input" [ngModel]="member.dob" 
        (ngModelChange)="member.dob=$event" name="inputField" type="text" />
Run Code Online (Sandbox Code Playgroud)

这就是上面代码最终打印到屏幕上的内容:

在此处输入图片说明

因此,您会注意到转换后的值减少了一天。我可以在此处添加什么以确保在通过日期管道后将正确的转换值打印到屏幕上?

javascript typescript date-pipe angular

7
推荐指数
1
解决办法
7523
查看次数

在Angular 2中传递非父/子关系组件之间的值

根据我的理解,在Angular 2中,如果要在不相关的组件之间传递值(即,不共享路由的组件,因此不共享父子关系),则通过共享服务执行此操作.

这就是我在Angular2应用程序中设置的内容.我正在检查一个url中是否存在一系列字符,如果存在则返回true.

  isRoomRoute(routeUrl) {
      if ((routeUrl.includes('staff') || routeUrl.includes('contractors'))) {
          console.log('This url: ' + routeUrl + ' is a roomRoute');
          return true;
      } else {
          console.log('This url: ' + routeUrl + ' is NOT a room route');
          return false;
      }
  }
Run Code Online (Sandbox Code Playgroud)

在根app.component的构造函数中,我正在订阅路由事件:

constructor(private routeService: RouteService,
            private router: Router)  {
    this.router.events.subscribe((route) => {
    let routeUrl = route.url;
    this.routeService.sendRoute(routeUrl);
    this.routeService.isRoomRoute(routeUrl);
    });
}
Run Code Online (Sandbox Code Playgroud)

...然后使用提供的URL来检查url是否包含特定字符串.每次路线更改时都会对此进行评估.

所以这一切都按预期工作.

但是,我在将该检查的结果传递给另一个不相关(非父子)组件时遇到了问题.

即使我在app.component和un-related(room.component)组件中使用共享服务(routeService),但在一个组件中工作的东西在另一个组件中不起作用.根据我的理解,这里检查的内容的"真实性"应该足以回复真实的陈述.

但是在次要的,不相关的组件中,当我调用函数时,我得到一个"未定义"错误,如下所示:

  isRoomRoute() {
       if (this.routeService.isRoomRoute(this.routeUrl)) {
           return true;
       }
     }
Run Code Online (Sandbox Code Playgroud)

所以这就是我被困住的地方.基本上,关于url是否包含某个字符串的评估已经发生.现在我只需要将该检查的布尔结果传递给辅助的非相关组件.我怎样才能在Angular 2中做到最好?

javascript typescript angular

5
推荐指数
1
解决办法
4408
查看次数

在 Angular 2 的字符串插值表达式中使用 Elvis 运算符

在我的 Angular 2 应用程序中,我使用字符串插值从 mongoDB 中提取数据。现在,服务器/数据库处于不断变化的状态,因此有时这会破坏我的客户端显示,因为例如,如果我通过字符串插值提取数据,如下所示:

{{record.addresses[0].zipCode}}
Run Code Online (Sandbox Code Playgroud)

...然后,稍后,数据库中数据的组织方式发生变化,这将破坏我的显示 - 因为客户端试图从不再存在的字段中提取数据。所以我认为我应该能够在这样的用例中使用像 elvis 运算符这样的东西。这样,如果数据位于客户端正在查找的位置,它将打印到屏幕上。但是,如果数据不在它要查找的位置,它将完全忽略该字段 - 不会破坏显示中的任何内容。

那么,简而言之,我将如何在上面的表达式上实现 elvis 运算符?

javascript string-interpolation typescript angular

5
推荐指数
1
解决办法
1111
查看次数

使JavaScript随机报价生成器每天只生成一个报价

我为我的Angular应用程序创建了一个随机引用生成器.组件代码如下所示:

qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)];
Run Code Online (Sandbox Code Playgroud)

这是从这样的数据中提取出来的:

  quotes = [
    {
      quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod magna magna, euismod tincidunt libero dignis.",
      author: 'Sorato Violasa'
    },
    {
      quote: "Nullam dignissim accumsan magna vitae rhoncus. Phasellus euismod magna magna, euismod tincidunt libero dignis.",
      author: 'Vito Dignaora'
    },
    {
      quote: "In tincidunt imperdiet augue, quis sollicitudin mi tincidunt ut.",
      author: 'Hivalo Amettioa'
    },
    {
      quote: "hasellus accumsan erat vitae enim blandit, quis euismod ipsum sollicitudin.",
      author: …
Run Code Online (Sandbox Code Playgroud)

javascript random date typescript angular

5
推荐指数
1
解决办法
213
查看次数

在MongoDB聚合中的“ addField”操作中使用“ $ count”

我试图找到聚合运算符的正确组合,以将标题为“ totalCount”的字段添加到我的mongoDB视图中。

这将使我获得聚合管道此特定阶段的计数,并将其作为每个文档的计数结果输出:

    {
        $count: "count"
    }
Run Code Online (Sandbox Code Playgroud)

但是,我最终得到了一个具有此结果的文档,而不是我要尝试完成的结果,那就是使该值作为addedField在所有文档中的字段/值,甚至更好地是一个值打印出来打印in addition到返回的文档。

我已经尝试过了,但是它给了我一个错误““无法识别的表达式'$ count'”,“:

    {
        $addFields: {
          "totalCount" : { $count: "totalCount" }
        }
    }
Run Code Online (Sandbox Code Playgroud)

为此,正确的语法结构是什么?是否可以通过这种方式执行此操作,或者是否需要使用$sum或其他一些运算符来执行此操作?我也试过这个:

    {
        $addFields: {
          "totalCount" : { $sum: { _id: 1 } }
        }
    },
Run Code Online (Sandbox Code Playgroud)

...但是它并没有给我任何错误,它只是打印0为每个文档中该字段的值,而不是所有文档的总数。

count mongodb

5
推荐指数
1
解决办法
1427
查看次数

无法使用应用程序密码通过 Visual Studio Code 登录 Bitbucket Repo

我最近为 bitbucket 设置了一个应用程序密码,因为从 3 月 1 日起,当我通过 Mac 上的 Visual Studio Code 连接到存储库时,他们要求使用此密码。

然而,我现在实际上很难连接。在 Visual Studio Code 中加载一个我之前已经克隆的项目后,我在终端中输入了以下内容:

git remote set-url origin https://<firstname.lastname>:<app-password>@bitbucket.org/<organization>
Run Code Online (Sandbox Code Playgroud)

然后当我尝试时git push origin feature-branch

我在终端中收到以下错误:

remote: Invalid credentials
fatal: Authentication failed for 'https://bitbucket.org/<organization>/'
Run Code Online (Sandbox Code Playgroud)

我在这里缺少什么?

顺便说一下,我从这里得到了上述说明:How to access bitbucket using app password

顺便说一句,我也尝试过:

git remote set-url origin https://<firstname.lastname>:<app-password>@bitbucket.org/<organization>.git
Run Code Online (Sandbox Code Playgroud)

另外,理想情况下,我想设置全局凭据,因为我将始终针对同一组织帐户,但其中有不同的存储库。有什么想法如何做到这一点?

git bitbucket

5
推荐指数
1
解决办法
7947
查看次数

使用 Output() 和 EventEmitter() 在 Angular 应用程序中传递值

上周,我成功地让 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;
}
Run Code Online (Sandbox Code Playgroud)

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

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

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

optionReceived(option) {
    console.log('Consulting: ' + option.toolbarLabel);
}
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

ngOnChanges(option) {
    this.optionReceived(option.toolbarLabel);
}
Run Code Online (Sandbox Code Playgroud)

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

我在这里缺少什么?

javascript eventemitter angular

4
推荐指数
1
解决办法
4886
查看次数