标签: angular2-template

如何在div上盘旋时将类添加到div.

模板 -

<div class="red">On hover add class ".yellow"</div>

零件 -

import {Component} from 'angular2/core';

@Component({
  selector: 'hello-world',
  templateUrl: 'src/hello_world.html',
  styles: [`
    .red {
      background: red;
    }

    .yellow {
      background: yellow;
    }

  `]
})
export class HelloWorld {
}

演示

[注意 - 我特别想添加一个新类,而不是修改现有的类]

叹!这是一个正常的用例,我还没有看到任何直接的解决方案!

我需要li在Angular2的列表中为每个项重复几个元素.在角度1.x我使用ng-repeat-start和ng-repeat-end为此.我无法在Angular 2中找到正确的方法.有一些较旧的博客文章,但他们的建议不适用于最新的Angular2测试版.

<li>应该为每个类别重复所有元素:(我通常会对属性进行处理*ngFor="#category of categories"- 但我找不到放在哪里...

救命？

<ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
</ul>

除登录页面外,我在每个页面上都有一些我想要的元素.当用户在登录页面上时,我想使用ngIf或可能的元素的隐藏属性来隐藏这些元素.

我试过这个:

<div [hidden]="router.isRouteActive(router.generate('/login'))">

基于这个问题和答案:在Angular 2中,您如何确定活动路线？

并且还试过这个:

 <div *ngIf="!router.isRouteActive(router.generate('/login'))">

但没有取得任何成功.

这里参考的是与此html匹配的组件.

import { Component, OnInit } from 'node_modules/@angular/core';
import { HTTP_PROVIDERS, XHRBackend } from 'node_modules/@angular/http';
import { Routes, Router, ROUTER_DIRECTIVES } from 'node_modules/@angular/router';

import { LoginService } from './login/login.service';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';

@Component({
    selector: 'portal',
    templateUrl: 'portal/portal.component.html',
    directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
    providers: [
        HTTP_PROVIDERS,
        LoginService
    ]
})

@Routes([
    { path: '/login', component: LoginComponent},
    { path: '/user/:username', component: UserComponent}
]) …

我需要在Angular2中做相同的事情:

<?php
foreach ($somethings as $something) {
    foreach ($something->children as $child) {
        echo '<tr>...</tr>';
    }
}

这可以通过ngFor实现,而不是在<table>和之间添加新元素<tr>吗？

给定组件属性中的以下数组groups:

[
   {
     "name": "pencils",
     "items": ["red pencil","blue pencil","yellow pencil"]
   },
   {
     "name": "rubbers",
     "items": ["big rubber","small rubber"]
   },
]

如何创建一个包含所有项目的html表,每个项目都在一行中？预期的HTML结果:

<table>
    <tr><td><h1>pencils</h1></td></tr>
    <tr><td>red pencil</td></tr>
    <tr><td>blue pencil</td></tr>
    <tr><td>yellow pencil</td></tr>
    <tr><td><h1>rubbers</h1></td></tr>
    <tr><td>big rubber</td></tr>
    <tr><td>small rubber</td></tr>
</table>

第一级很容易:

<table>
    <tr *ngFor="#group of groups">
        <td><h1>{{group.name}}</h1></td>
    </tr>
</table>

但现在我必须迭代#item of group.问题是我需要在定义<tr>元素之后的新元素,而不是在里面.</tr>group

在Angular2模板中有没有解决这类问题的方法？我期待一些特殊的标签,我可以使用而<tr>不是写入dom.与JSF中的facet和片段类似的东西.

我试图在这个例子中使用ngSwitch, 但是我收到一个错误:

我的组件:

  template: `
    <div layout="column" layout-align="center center">   
   <div [ng-switch]="value">
       <div *ng-switch-when="'init'">
     <button md-raised-button class="md-raised md-primary">User</button>
     <button md-raised-button class="md-raised md-primary">Non user</button>

     </div>
  <div *ng-switch-when="0">Second template</div>
  <div *ng-switch-when="1">Third Template</div>
</div>
  </div>`,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
 })

我的plunker - wizard.ts

我错过了什么？谢谢

我有动态生成的输入:

  <div *ngFor="let cell of column; let i = index;">
          <!-- Material design input-->
          <md-input id="my-input-{{i}}">
          </md-input>
  </div>

请注意id=my-input-{{i}}我希望基于此动态ID获得对DOM元素的引用.此输入可以是3个,6个或更多输入,因此我需要动态访问id并保持它.

我陷入了困境.我收到这样的错误.

 compiler.es5.js:1694 Uncaught Error: Unexpected value 'LoginComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (compiler.es5.js:1694)
    at compiler.es5.js:15595
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15577)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26965)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

我的登录组件看起来像这样

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

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

export class LoginComponent{}

app.module.ts

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

任何人都可以帮我看看我的模板中是否存在语法错误？它不会给出错误,但不会将数据填入模板:

<div *ngIf="(hero | async)">
  <h2>{{hero}}</h2>
  <h2>{{hero.name}} details!</h2>
  <div>
    <label>_id: </label>{{hero._id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name" />
  </div>
  <button (click)="goBack()">Back</button>
</div>

组件代码

export class HeroDetailComponent implements OnInit {
    errorMessage: string;

    //@Input() 
    hero: Observable<Hero>;

    constructor(
        private _heroService: HeroService,
        private _routeParams: RouteParams) {
    }

    ngOnInit() {
        let _id = +this._routeParams.get('_id');
        this._heroService.loadHero(_id);
        this.hero = this._heroService.hero$;
        this.hero.subscribe(data => 
           console.log(data)
        )
    }

在console.log(data)打印:

对象{_id:11,名称:"尼斯先生"}

这意味着正确检索数据.

该<div>块也显示出来,这意味着*ngIf该对象看起来是非空的.

<h2>{{hero}}</h2>节目[object Object].

但为什么{{hero.name}}不显示？

<div *ngIf="true" myHighlight #tRefVar="myHighlight"></div>
<div>tRefVar is {{tRefVar.foo}}</div>

即使这*ngIf是真的,我也会得到一个Cannot read property 'foo' of undefined.如果我删除它*ngIf,它工作正常!

我尝试使用Elvis运算符tRefVar?.foo来解决错误,但之后它永远不会更新值.

https://plnkr.co/edit/5rsXygxK1sBbbkYdobjn?p=preview

我究竟做错了什么？