标签: angular2-template

我正在使用创建导航菜单

<li *ngFor="let child of children">
  <a (click)="navChanged(child.name)">
    <div> {{child.name}} </div>
  </a>
</li>

现在我想添加class="active"到活动(点击)的child.name并且我没有使用路由.

我正在尝试使用PrimeNG的p-dataScroller构建一个通用列表组件,如下所示:

<div>
  <p-dataScroller [value]="items" ...more properties...>
    <template let-listItem>
      <div (click)="select(listItem)">
        <template [ngTemplateOutlet]="itemTemplate"
                  [ngOutletContext]="{'item': listItem, 'selected': listItem == selectedItem}"></template>
      </div>
    </template>
  </p-dataScroller>
</div>

p-dataScroller本身使用模板传播items数组中的每个项目.
selectedItem并且select()是相应的通用列表组件的方法.在这个组件中,我这样声明itemTemplate:

 @ContentChild(TemplateRef)
 public itemTemplate: TemplateRef<any>;

最后我以下列方式使用我的通用列表组件:

<generic-list [items]="someArray">
  <template>
    <list-item [itemType]="itemType">
      <template let-item>
        <i class ="fa" [ngClass]="{'fa-lock': item.visibility == 0,
                                   'fa-users': item.visibility == 1}"></i>
      </template>
    </list-item>
  </template>
</generic-list>

如您所见,模板组件(list-item)本身有另一个模板!
首先,我想知道这是否存在问题(三个嵌套模板),但更重要的是,ngOutletContext似乎没有将值添加到每个模板中list-item.两者item和selected输入参数都存在于list-item组件中,但似乎没有设置它们.在调试时,Angular 2正确地将list-item组件添加为列表条目,但抛出异常,因为它缺少item输入参数AfterContentInit.有趣的是,itemType输入参数设置正确,可能是因为它不属于ngOutletContext.

我不能移动列表项组件的通用列表组件模板内,降低了复杂性,因为有几种不同类型的可以使用的物品(所有这些都具有 …

在 Angular2 中，我有一个模板代码，每当用户单击按钮时，我都会克隆该代码，就像在此处回答 如何在 angular2 中动态添加克隆节点（相当于 cloneNode）

我试图将一个变量传递给它，但它不起作用。怎么了？

import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <template #clone let-session>
     <div [id]="session">eps {{session}} ya</div>
    </template>

    <div #container></div>

    <div>
      <button (click)="create()">Hello</button>
    </div>
  `,
})
export class App {
  name:string;

    @ViewChild('clone') clone:any;
    @ViewChild('container', {read:ViewContainerRef}) container:any;

  constructor() {
    this.name = 'Angular2'
  }

  create(){
    let session = 'testing';
        this.container.createEmbeddedView(this.clone, {context: {$implicit: session}});
  }
}

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

我正在尝试创建以下UI/UX按钮:
.. [2015] [2016] [2017]

默认情况下,当前年份(在撰写时,2017年)被"选中",当用户点击"2015"时,应取消选择"2017"和"2016"(这些按钮是"互斥的")

这些按钮是从外部数据源生成的,该数据源为我提供了多年的数据:

<button *ngFor="let year of styles.years"  type="button" name="button" class="btn btn-default" id="{{year.year}}">
  {{year.year}}
</button>

如何创建一个按钮系统,其中一个按钮被"自动选择",当选择"其他"按钮时,它会取消选择主动选择的按钮,并将现在单击的按钮设置为"已选择"？

我向模板添加了模式属性

<input class="form-control" type="text" id="elementName"
                                   [(ngModel)]="elementName" name="elementName"
                                   (input)="onElementNameChanged()" #name="ngModel" required pattern="[A-Za-z0-9_)*\S]*" >

如何添加输入不正确时显示的消息？

像这样的东西不会工作：

<div [hidden]="!name.errors.pattern"
     class="alert alert-danger">
     Name must match pattern
</div>

我是 angular2 的新手，并尝试将对象结果绑定到 html 模板。我可以使用 Observable 从 srtvice 获取数据。我也可以在控制台和模板中看到 JSON 数据。但是当我尝试从结果 json 访问属性时，它没有显示如下图所示的数据。

下面是我的该组件的代码，

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

import { JuniorService } from '../Service/service.junior';
import { Employee } from '../../models/Employee';


@Component({
  selector: 'my-getjunior',
  template: `<h1>Details of {{id}} 
  <hr/>
  JSON :  {{Junior | json}} 
  <hr/>
  Summary :  {{junior?.summary}}</h1>`
  //templateUrl: './app/Junior/get/junior.get.html'
})
export class JuniorGet implements OnInit
 {

errorMessage: string;
Junior: Employee;
id: number;
private sub: any;

  constructor (private juniorService: JuniorService, private route: …

我在我的项目中使用 Angular 2。我遇到了一个场景，其中我有一个项目列表，一个项目可能有子项目。我必须显示表格中的所有项目（包括子项目）。我对 tr 标签中的每个项目列表使用 *ngFor 。但是，由于我还必须显示子项目，因此我无法通过一个 *ngFor 来执行此操作。我可以采用什么方法来实现这一目标？正在寻找您的建议。请帮帮我。这是我想要显示的内容。

 items= [
    { name : 'bag', subitems: [{ name : 'pen' }, { name : 'pen1' }] },
    { name : 'chair' }
  ];

该表应具有以下行：

 bag
 pen
 pen1
 chair

请帮忙。

declare let numeral:any;

@Component({     
      //moduleId: module.id,     
      selector: 'app-dashboard',   
      templateUrl: './dashboard.component.html',     
      styleUrls:  hboard.component.css' 
})

我正在使用Angular2 + Webpack3.

这是我的webpack.config.ts和tsconfig.json.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


function webpackConfig(options: EnvOptions = {}): WebpackConfig {

  return {
      cache: false,

      entry: {
          polyfills: './src/polyfills',
          vendor:       './src/vendor',
          main:           './src/main'
      },

      output: {
          path: path.join(__dirname, '/public'),
          filename: '[name].bundle.js',
          sourceMapFilename: '[name].map',
          chunkFilename: '[id].chunk.js'
      },

      module: {
          loaders: [


               { test:/\.ts$/,loaders:['awesome-typescript-loader','angular2-template-loader']},
               { test: /\.json$/,loader:'json-loader'},
               { test: /\.html$/, loader:'html-loader'},
               { test: …

这是我的代码。我无法上传大小超过 1 mb 的任何文件，但我已将 maxFileSize 设置为 50mb，请帮忙，我做错了什么？

@Component({
    moduleId: module.id,
    //define the element to be selected from the html structure.
    selector: 'NeedAnalysisConsult',
    //location of our template rather than writing inline templates.
    templateUrl: 'need-analysis-consultation.component.html',

})
export class NeedAnalysisConsultationComponent implements OnInit {
    model:any={};
    consultationDate: Date;
    organisation: string;
    devCode:String;
    maxFileSize = 50 * 1024 * 1024;


     //declare a property called fileuploader and assign it to an instance of a new fileUploader.
    //pass in the Url to be uploaded to, and pass the itemAlais, …

有人可以帮助我，如何在innerHTML 标签中使用ng-template，

Stackblitz 演示：https ://stackblitz.com/edit/angular-xgnnj4

我想做的是，

在组件 HTML 中

<div [innerHTML]="htmlString"><div>

在组件 TS

@ViewChild('dynamicComponent', { static: false, read: ViewContainerRef }) myRef: ViewContainerRef;

htmlString = `<ng-template #dynamicComponent></ng-template>`;

  ngAfterViewInit(): void {
    const factory = this.componentFactoryResolver.resolveComponentFactory(CommentComponent);
    const ref = this.myRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
  }

我真的需要以这种方式实现，因为我想从 API 获取 HTML 内容并使用该值动态显示 HTML 内容

当我收到错误时无法读取未定义的属性“createComponent”，但如果我将其放在innerHTML 之外，它可以完美运行

我已经浏览了https://angular.io/guide/dynamic-component-loader但它对我的场景没有帮助

我的 Angular 应用程序中有这个浮动按钮，

  <button [ngClass]="{
  'mdc-fab--extended': extendedClass,
  'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

当屏幕尺寸为 768px 或更低时，我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗？我可以做什么来实现这个功能？谢谢

我已经尝试过，但课程没有被删除/添加

    if (window.innerWidth < 768) {
  this.miniClass = true;
  this.extendedClass = false;
} else {
  this.miniClass = false;
  this.extendedClass = true;
}

当我使用HttpClient使用响应Obj 更新html时，它会更新值，但会出现多个错误。

    import { any } from 'codelyzer/util/function';
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable()
    export class AuthService {

      constructor(private httpClient: HttpClient) { }
      get() {
        return this.httpClient.get<any>('/capi/v2/users/me', {
          observe: 'body',
          responseType: 'json'
        });
      }
    };

    import { AuthService } from './../../services/api/auth-service';

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

    @Component({
        selector: 'app-dashboard',
        templateUrl: './dashboard.component.html'
    })

    @Injectable()
    export class DashBoardComponent implements OnInit {
        user;
        constructor(private authService: AuthService) {}; …