标签: angular2-directives

有没有办法用ng2-smart-table实现全局搜索？请注意，它是按列过滤的。

我有一个这样的数组： public color = ['red','green','blue'];

这是我的代码：

<ul>
    <li *ngFor="#color of colors; #i=index">{{i}}. {{color}}<li>
</ul>

这是我的输出：

为什么会显示这个额外的列表？

我正在尝试更改动态添加到元素数组中的元素的背景颜色,点击我在component.html中的第4个按钮,如下所示:

    <button class="btn" (click)="toggleContent()">Display Details</button>

    <div class="left-align left-div">
      <div class="center-align" *ngFor="let counter of count" >
        <p [ngStyle]="{backgroundColor: blueBackground()}" [ngClass]="{whitetext: counter > 4}">{{ counter }}</p>
      </div>
    </div>

在第5次单击后,数组中的所有元素都会获得彩色背景,而不是那些在计数器获得超过4之后添加的背景.同时,ngClass指令在相同条件下运行良好,并且只有元素中的文本第5次点击变白.这是我的component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .outer-div {
      height: 20px;
      margin: 20px;
    }
    .left-div {
      width: 50px;
      margin-top: 5px;
    }
    .inner-div {
      border: 2px solid lightblue;
      height: 20px;
      margin: 20px;
    }
    .whitetext {
      color: white;
    }
  `]
})
export class AppComponent  {

    count = [];
    counter: …

我正在为我的一个项目使用 angular 2，我正在使用 ngx-pagination 对表进行分页。我的页面结构是这样的

parent->child1=table1
        child2-table-2
        child-table-3
        child4-table-4

每个孩子都调用自己的休息请求并填充表格。我在父级中使用了子组件，如下所示

parent->child1=table1
        child2-table-2
        child-table-3
        child4-table-4

等等

在每个子组件中，我都使用 ngx-pagination 作为

<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pgNumber};let i=index">

<pagination-controls (pageChange)="pgNumber = $event"></pagination-controls>

每个孩子都有唯一的 pageNumber 变量；

现在我面临的问题是，当我尝试更改一个表的页码时，它也会影响其他子表。如果我单击第一个表的第 2 页，所有其他表都将当前页更改为第 2 页.我做错了什么？我做的方式有什么问题吗？

我正在尝试定义一个指令，如果用户没有特定声明，它将隐藏元素。

在我定义指令后，我在 application.module 声明中声明它。

问题是我无法使用嵌套在 application.module 中的模块中的指令。如果我在应用程序模块“旁边”的组件中使用指令，它工作正常，但是当我使用来自嵌套模块内部的组件的指令时，编译器无法识别它并抛出错误，如果我再次声明指令编译器再次抛出，因为它是在别处声明的。

我有一个Angular 2应用程序在使用，Typescript但我是新手，我有一个带有“删除”按钮的表格，

我可以将对象数据传递给我的确认模式，但是当我“确认”它时，它仍然在我的表中。

删除-modal.component

import { Component, OnInit, Inject, Input } from '@angular/core';
import { TestService } from '../../ABC/TestService/TestService.service';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';

import { testModal } from 'models/test';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.css']
})

export class testDeleteModalComponent implements OnInit {
    @Input('test') test: testModal;

    constructor(private TestService: TestService, private accountService: AccountService,
        @Inject(MD_DIALOG_DATA) private dialogData: any) { }

    ngOnInit() {
        console.log('test', this.dialogData.beneficiary);
        this.test = this.dialogData.test;
    }

    deleteTest() {

        if (this.dialogData.test.identifier) {
            // …

我在 app.module.ts 中导入了 FormsModule 但我仍然收到此错误。

无法绑定到“ngModel”，因为它不是“input”的已知属性

我已经浏览过类似的帖子，但仍然无法找到解决方案。

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgModule  } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [ 
    AppComponent
  ],
  bootstrap: …

在学习 Angular 课程时，培训师告诉 ng-template 是一个指令，而 Angular 有 3 种类型的指令——属性、结构和组件。所以我很困惑它到底是什么？

就像我说的，我想在自定义指令中使用现有的基于结构指令字符串的语法

<element *ngFor='let x of array;let last = last;'></element>

我没有找到任何详细的文档，说明我们如何在自定义结构指令中解码上述语法。我知道我们可以将此语法与所有结构指令 *xyz 一起使用，但我总是使用 [xyz] 代替。我试图找到 Angular 官方文档但一无所获。

所以我进入他们的代码来理解github 中的 *NgFor，除了他们如何解码语法之外，我得到了一切。

如果您看到选择器，如下所示

@Directive({selector: '[ngFor][ngForOf]'})

@Input()
set ngForTrackBy(fn: TrackByFunction<T>) {
    //definition
}

所有输入方法都以选择器前缀开头，例如ngForTrackBy。就只有这样吗？我们必须遵循选择器前缀吗？
如果是，那么我们可以使用这种基于前缀的方法做哪些其他事情？如果不是，那么正确的方法是什么？

尝试进入角度2，对角度1有一些经验并且有一些困惑。

我制作了一个共享模块：

import { NgModule }      from '@angular/core';
import { CommonModule }        from '@angular/common';

import { Constants }   from './injectables/constants';
import { Utils } from "./injectables/utils";
import { HighlightDirective } from "./directives/highlight";

@NgModule({
    imports: [ CommonModule ],
    declarations: [ HighlightDirective ],
    providers: [ Constants, Utils ],
    exports: [ HighlightDirective ]
})
export class VCommonModule { }

如果我错了，请纠正我，但是据我了解，这里仅需要导出指令，管道和组件？在我将此模块包含到AppModule的导入中之后，可以立即使用Services（Injectables）吗？所以我做到了：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { VCommonModule } from …