标签: angular2-template

我正在尝试将我制作的组件导入主组件,但它不能正确渲染,只<helloworld>Testing...</helloworld>显示在浏览器上

这是我的主要component.ts文件:

import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';
import {eye} from 'eyeComponent';       //importing components
import {hair} from 'hairComponent' ;

@Component({
selector : 'helloworld',
directives : [hair, eye]
});

@View({
template : `<div>
            <hair></hair>
            <eyes></eyes>
            </div>
`
  })
export class helloworld {

}

bootstrap(helloworld);

这是我导入的组件文件

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
selector : 'eyes',
template : `<h1> eyes </h1>`
});

export class eye{

}

bootstrap(eye);

这是另一个component.ts文件:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from …

目前,我有一项服务可以从我编写的许多API中获取值.在模板中,我希望只有当值存在时才输出以下html,或者当它们被送到模板时结果中不为空:

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

所以我试图找出如何在ngIf中包装它或者是否有其他方法来执行此操作,以便只有当该值存在且非空时才会输出此'li'项

我有这样的路线

   path: 'projects/:id/settings'

在我的header.component.html中,我希望有一个指向此页面的链接

<a routerLink="['projects', progectId,'settings']" routerLinkActive="active">cool link</a>

我有一个project.component,当我点击某个项目时,我会进入项目页面.然后我需要有可能去projects/:id/settings或其他类似的路线.

如何progectId从projects.component 传递变量？
或者也许有人知道实现这个的另一种方式.

我正在为两个json服务（DB）使用In memory Web API

1）

import {InMemoryDbService} from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        let heroes = [
            {id: 11, name: 'Mr. Nice'},
            {id: 12, name: 'Narco'},
            {id: 13, name: 'Bombasto'},
            {id: 14, name: 'Celeritas'},
            {id: 15, name: 'Magneta'},
            {id: 16, name: 'RubberMan'},
            {id: 17, name: 'Dynama'},
            {id: 18, name: 'Dr IQ'},
            {id: 19, name: 'Magma'},
            {id: 20, name: 'Tornado'}
        ];
        return {heroes};
    }
}      

2）

import {InMemoryDbService} from 'angular-in-memory-web-api';

import {Address} from "cluster";

export class StudentData …

它又是我....我在视图中显示我的项目数组时遇到问题,我总是遇到这个错误.[Unhandled Promise rejection:无法设置未定义的属性'stack'; 区域:; 任务:Promise.then; 值:TypeError:无法设置未定义的属性'stack']

也许我在html视图中绑定数据时做错了.

   ngOnInit() : void{


        this._loadCoil.getAllCoils().subscribe(coils =>{ this.coils = coils;
            this.gridData = {
                data: this.coils.slice(this.currentPage, this.currentPage + this.displaySize),
                total: this.coils.length};

            for(let i = 0; i < this.coils.length; i++){
                let isFound = false;
                for (let j = 0; j < this.dropDownArray.length; j++){
                    if (this.dropDownArray[j] == this.coils[i].unit){
                        isFound = true;
                        break;
                    }
                }

                if(!isFound){
                    this.dropDownArray.push(this.coils[i].unit);
                }
            }
        }); 

    }

基本上我想用我的数组填充单位名称并在网站上显示它们.(这部分工作正常)

但是,当我想在页面上打印名称时,我得到前面提到的.这是我在html页面中的代码片段

  <div>
         <ul>
           <li *ngFor="let name in dropDownArray">{{name}}</li>
         </ul>

  </div>

我是一个非常新的角度2我被困在这里,我必须显示一个我正在使用相对路径的图像

<img src="./../images/publicVideo1.PNG">

但得到以下错误

null:1 GET http://localhost:4200/null 404 (Not Found)

上面是app结构,我在images文件夹中有图像,我试图从public-videos.component.html访问

我不明白我错在哪里任何帮助将不胜感激.

组件模型：

private SomeArray = [{ key: "Initial" }];

用户可以动态添加/删除项目：

addField() {
    this.SomeArray.push({ key: Math.random().toString() });
}

removeField(index: number) {
    this.SomeArray.splice(index, 1);
}

模板标记：

 <div class="col-xs-12">
     <button (click)="addField()" type="button">Add</button>
 </div>

 <div *ngFor="let field of SomeArray; let i = index;">
     <input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required />
     <div [hidden]="modelField.pristine || !(modelField.errors && modelField.errors.required)" class="alert alert-danger">
        Required error
     </div>

    <button (click)="removeField(i)" class="btn btn-danger">Remove</button>
 </div>

在用户从中删除任何项目之前，此方法一直有效SomeArray。如果我最初添加了两个项目：

并删除索引为1的索引：

然后在添加另一个项目Angular之后，将其视为项目同时具有0和1索引（新项目“占用”两个输入）：

（不显示键为0.1345 ...的项目）

值得注意的SomeArray是预期的项目，但是数据绑定失败。可能是什么原因呢？

更新：感谢@Stefan Svrkota和@ AJT_82的评论，据我所知，可以通过添加[ngModelOptions]="{standalone: true}" …

我有一个基于我从服务器给出的数据动态生成的大表单.要生成单选按钮,我使用以下HTML:

<ng-container *ngSwitchCase="'RADIO'">
  <td *ngFor="let option of item.SelectOptions">
    <div class="input-group">
      <input type="radio"
        [(ngModel)]="item.PricingSelectIndex"
        name="{{ item.UIName }}RadioButton"
        id="{{ item.UIName }}{{ option.PricingSelectIndex }}"
        [value]="option.PricingSelectIndex"
        [disabled]="item.ReadonlyTF"
        (click)="saveField(item.UIName, 'SelectIndex', option.PricingSelectIndex)" />
      <label for="{{ item.UIName }}{{ option.PricingSelectIndex }}" style="margin-left: 5px;">
        {{ option.Label }}
        <i class="fa fa-question-circle" [tooltip]="item.TooltipText" placement="right" *ngIf="item.TooltipText"></i>
      </label>
    </div>
  </td>
</ng-container>

显然,这是较大页面的一部分,它从数据中查看每个项目,并根据项目的ControlType属性生成表单 - 这是单选按钮的HTML.数据项包括一个名为ReadonlyTF的属性,它告诉我是否应该禁用控件(例如只读).该项目包括一个SelectOptions属性,该属性是一个较小的项目数组,每个项目映射到集合中的一个单选按钮.(例如,我遇到问题的控件有两个SelectOptions,一个用于Yes,一个用于No.)因此每个单选按钮都生成相同的HTML.

这是奇怪的事情.在所讨论的控件中,生成的第一个单选按钮被禁用(这是我想要的),但第二个单选按钮不是.

如果你仔细观察,你可以看到是被禁用但是没有被禁用!以下是在Chrome的"元素"标签中呈现两个控件的方式:

两者都包括ng-reflect-is-disabled="true"但只有第一个实际上是禁用的.第二个按钮丢失了ng-reflect-value.同样,这些是使用完全相同的HTML片段呈现的.

我正在使用Angular 2.4.6,Typescript 2.1.5,bootstrap 3.3.7和angular-cli进行编译.组件中没有支持TS会影响这一点:我获取数据并将其弹出到一个属性中,然后由HTML模板拾取,就是这样.我认为它可能是某种变化检测问题,但强制它changeDetectorRef.detectChanges()并没有做任何事情.我很难过,但我没有一个活跃的单选按钮坐在那里供任何人点击!

谢谢!

我有下一个html：

<select  [(ngModel)]="district"  class="form-control" (change)="dsChange()">

      <option disabled hidden [value]="undefined" >?????</option>

      <option *ngFor="let dis of districts" [ngValue]="dis">{{dis.title}}</option>
</select>

我还有下一个组件

@Input() district: District;
 ngOnChanges(changes: SimpleChanges) {
      console.log("CHANGED")
}
 dsChange(){
      console.log(this.district);
}

而且我不明白为什么当我选择一些值dsChange时会用区的正确值触发，但是ngOnChanges（）却没有

我有一个以Angular模板驱动形式的国家/地区

"countries" : [  
   {  
      "id":1,
      "code":"NL"
   },
   {  
      "id":2,
      "code":"US"
   }
]

我在模型中有一个选定的ID：2

我想将值“ US”绑定到div中。像这样：

<div>{{countries[id==model.countryId].code}}</div>

角度5可能吗？我在网上看到数组的过滤器管道不再存在于角度中。

我让它像这样工作，但这不是很好，我会说：

<ng-container *ngFor="let country of countries">
   <div *ngIf="country.id==parentModel.countryId">{{country.code}}</div>
</ng-container>