标签: angular5

这是我正在尝试的代码

search(){
   this.toDisplay = this.products.filter(function(x){
      return this.checkCondition(x.price, condition);
   }
}

它是基于条件数的大于、范围、最大值等复杂条件，该函数判断条件是否满足并返回 true 或 false；

checkCondition(item, condition){
  switch(conditoin){
    case 1:  ... brea;
    case 2:  ... brea;
    case 3:  ... brea;

  }
  return status;
}

问题是，当我this.checkCondition在过滤器内部使用时，总是抛出checkCondition未定义的属性，意味着this未定义。

我检查this总是未定义，那么如何调用过滤器内部的函数呢？

我已经包括了FormsModule，但它显示了我的错误。

There is no directive with \xe2\x80\x9cexportAs\xe2\x80\x9d set to \xe2\x80\x9cngForm\xe2\x80\x9d \n

我的 Login.component.ts ：-

import { Component } from \'@angular/core\';\nimport { Http, Response , RequestOptions , Headers , URLSearchParams } from \'@angular/http\';\nimport {FormsModule} from \'@angular/forms\';\n\n@Component({\n    templateUrl: \'./login.component.html\'\n})\n\nexport class LoginComponent {\n    apiRoot : String = "http://httpbin.org";\n    // search code starts here\n\n    // data = string;\n    constructor(private http: Http){\n\n    }\n    onSubmit(value){\n\n        let name = value.name;\n        let password = value.password;\n        let url = `${this.apiRoot}/post`;\n        this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));\n …

我有一个可重用的模态组件，与其他几个组件一起使用。

我使用的模态框架来自ng-bootstrap（NgbActiveModal）。

该模式仅列出一组来自调用它的父组件的字符串。

但是，我希望模式根据父组件的不同显示不同。例如，我可能需要它来显示表格而不是列表。我是这样拼凑的：

<div class="modal-body">
  <div *ngIf="data.encoding !== undefined">
    <p>Hello {{data.name}}. These are your badly encoded words:</p>
    <ul><li *ngFor="let item of data.words">{{item}}</li></ul>
  </div>
  <div *ngIf="data.urls !== undefined">
    <p>Hello {{data.name}}. These are your broken urls:</p>
    <ul><li *ngFor="let item of data.urls">{{item}}</li></ul>
  </div>

这是可行的，但它确实很丑陋，并且完全依赖于来自父级的数据项。正确执行此操作的角度方法是什么？

我面临一个与角度应用程序相关的问题，在我的应用程序中使用组件，然后当我使用单页面时，页面加载成功，但当我在新选项卡中打开该 URL 或重新加载它时，给出错误“未找到”。

我为此使用 AWS apache 服务器，并且仅在我的 Godaddy 服务器页面重新加载正常工作时遇到此问题。

在这里我附上错误的屏幕截图。[

提前致谢

我有一个项目，我必须在一个页面中使用相同的组件两次，但组件没有授予此权限，所以我想将它与 iframe 一起使用，但我找不到如何将 iframe src 设置为字符串 html。我可以使用 div 绑定 html，但无法使用 iframe 执行此操作

这是我的翻译管道：

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustHtml(url);
    }
}

我的html页面：

<div [innerHTML] = "template | safe"></div>

我可以使用这种方法，但我需要一个单独的页面，所以

<iframe [src] = "template | safe"></iframe>

我需要用 iframe 来做。

这是我的 Typescript 文件：

template: SafeHtml;
constructor() {
        this.template = '<button class="btn btn-lg btn-success">...</button>';
    }

我正在使用 primeng 日历，但无法从数据库设置日期。这是我来自服务器的日期：2018-04-17T16:41:47.683

当我尝试将格式更改为“YYYY.MM.DD HH.MM”时，我在控制台上收到此错误：未捕获（承诺中）：位置 2 处出现意外的文字 当我将日期时间转换为字符串时，我收到相同的错误我不知道该怎么办。请帮忙

这是我的代码：

组件.html

<p-calendar id="StartDate" inputStyleClass="form-control" [showIcon]="true" showTime="true" hourFormat="24" [locale]="tr"
              name="StartDate" [(ngModel)]="datex"></p-calendar>


            <!--  <p-calendar id="StartDate" inputStyleClass="form-control" [showIcon]="true" showTime="true" hourFormat="24" [locale]="tr"
              name="StartDate" [(ngModel)]="contentTranslate.StartDate"></p-calendar> -->

PS：我用 ngmodel 尝试了两种方法。

组件.ts

 ngOnInit() {
this.getLanguageDetail(this.contentId, this.langId); }

getLanguageDetail(contentId: number, langId: number): any {
    this.contentService
      .getTranslateDetail(contentId, langId)
      .subscribe(x => this.detailResultFunc(x));
  }


detailResultFunc(x: any): any {
    if (x) {
      this.contentTranslate = x;
      const tmpDate: string = moment(this.contentTranslate.StartDate).format('YYYY.MM.DD HH:MM');
      this.datex = tmpDate; new Date(tmpDate).toLocaleDateString(); //.toLocaleDateString().trim();
    } else {
      this.contentTranslate …

我正在使用 angular5 ，我无法将 *dropdownMenu 与 *ngFor 一起使用，我收到此错误：

ng : Can't have multiple template bindings on one element . Use only one attribute named template or prefixed with *

这是代码：

<div class="btn-group" dropdown>
        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="ListUsers()">
          List of users <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu" role="menu" *ngFor="let c of listUsers">
          <li role="menuitem"><a class="dropdown-item">{{c.Firstname}} {{c.lastName}}</a></li>
        </ul>
      </div>

我该如何解决这个问题？

我试图在单击按钮时创建一个微调器，但它似乎没有运行，这就是我在 component.html 中所做的

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" style="background: #FF473A;">
  Sign In
  <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
</button>

并在 component.ts 中

export class LoginComponent implements onInit {
  private loading: boolean;

  //form ngSubmit function()
  login() {
    if (this.user.email, this.user.password) {
      this.loading = true;
      this.userSrv.login(this.user.email, this.user.password); //api call here
      this.loading = false;
    }
  }
}

好的，我的服务.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';
import { Globals } …

我正在使用 Angular Material 2 和 Angular 5。我正在使用 mat-table。我想修复 mat-table 中的单个列。当我滚动水平条时，一列将固定并且不滚动。是否可以在 mat-table 中固定一列。

Angular 材质 2：垫子-桌子链接

我目前正在开发一个项目，我需要根据组件传递一些 @input 值。因此，该指令将相应地发挥作用。但问题是我无法获得该指令的参考。相反，我只得到了 elementRef 作为回报。请参阅下面的 stackblitz 示例以获取更多参考。

https://stackblitz.com/edit/angular-feptw3