标签: angular2-template

我写了一个非常简单的小Angular2应用程序,我已经构建它来生成练习表.但是,当我部署应用程序时,ngIf似乎不起作用(我的ISP默认网络服务器或我自己的Heroku /本地部署的节点-http-server).当我在我的开发节点服务器上运行完全相同的代码库时(npm start)ngIf按预期工作.

如果有人对如何调试这个有一些指导我会非常感激,或者如果我只是做错了...

这是相关的代码

SRC/template.html

Click on the top left word <span *ngIf="word">({{word}})</span><span *ngIf="!word">(&lt;click&gt;)</span>

app.ts

import {bootstrap} from 'angular2/platform/browser'
import {enableProdMode, Component} from 'angular2/core'
enableProdMode()

@Component({
  selector: 'app',
  templateUrl: 'src/template.html'
})
export class AppComponent {
  public word = '';
}

bootstrap(AppComponent)

当应用程序在本地启动时,我会看到"单击左上角的单词(<click>)"(如此plunker链接中所示),但是当我部署应用程序时,我只看到"单击左上角的单词".我以前在部署中发现了与ngFor类似的问题.但是我确实在dev和deploy中看到了以下代码

<!--template bindings={}-->
<!--template bindings={}-->

所以模板正在被处理,至少在某种程度上.我最好的猜测是说一定是想错了,当我生成bundle.js 或dependencies.js文件小号通过一饮而尽.我通过Chrome开发者控制台在开发或部署网站上看不到任何Javascript错误.

以下是我的gulpfile中的一些相关任务.

gulp.task('webpack', ['clean'], function() {
  return gulp.src('src/app/app.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

gulp.task('dependencies', function() {
  return gulp.src(['node_modules/reflect-metadata/Reflect.js', 
                   'node_modules/zone.js/dist/zone.js'])
    .pipe(concat('dependencies.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/')); …

我在浏览器日志中遇到以下异常:

警报上未找到指令注释

堆栈跟踪:

Error: No Directive annotation found on Alert
at new BaseException (webpack:///./~/angular2/src/facade/exceptions.js?:15:23)
at DirectiveResolver.resolve (webpack:///./~/angular2/src/core/linker/directive_resolver.js?:41:15)
at RuntimeMetadataResolver.getDirectiveMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:41:51)
at eval (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:62)
at Array.map (native)
at Array.map (webpack:///./~/es6-shim/es6-shim.js?:1113:14)
at RuntimeMetadataResolver.getViewDirectivesMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:27)
at TemplateCompiler._compileNestedComponentRuntime (webpack:///./~/angular2/src/compiler/template_compiler.js?:151:65)
at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:87)
at Array.forEach (native)
at Array.forEach (webpack:///./~/es6-shim/es6-shim.js?:1107:14)
at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:43)
at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
at Zone.eval [as run] (webpack:///./~/angular2/src/core/zone/ng_zone.js?:344:42)
at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26)
at lib$es6$promise$$internal$$tryCatch (webpack:///./~/zone.js/dist/zone-microtask.js?:441:17)
at lib$es6$promise$$internal$$invokeCallback (webpack:///./~/zone.js/dist/zone-microtask.js?:453:18)
at lib$es6$promise$$internal$$publish (webpack:///./~/zone.js/dist/zone-microtask.js?:424:12)
at eval (webpack:///./~/zone.js/dist/zone-microtask.js?:96:10)
at microtask (webpack:///./~/angular2/src/core/zone/ng_zone.js?:384:29)
at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
at Zone.eval [as run] …

我需要有关angular 2的帮助。是否可以将对象数组从父组件传递到子组件？似乎不可能，但是也许我错过了一些东西。在下面，您可以看到我在我的代码中尝试过的摘要。

parent.component.ts
-----------------------------------------

@Component({
    template: `
        <child dataset="{{ people }}"></child>  
    `,
})

export class ParentComponent{

    private people: any[] = [
        { name: 'jimmy', age: 22, gender: 'male' },
        { name: 'johnny', age: 23, gender: 'male' },
        { name: 'danny', age: 24, gender: 'male' }
    ];

}


child.component.ts
-----------------------------------------
export class ChildComponent implements OnInit{

@Input() private dataset: any[] = [];

    ngOnInit() {
        console.log(this.dataset);
    }  

}


console
-----------------------------------------
[object Object],[object Object],[object Object]

我正在使用ngfor来显示不同数量的项目.我想限制它可以显示的项目数量为5,所以我使用:

<li  *ngFor="let item of items; let i = index;">
     <div *ngIf="i < 4">
       //more stuff ...
     </div>
</li>

但这样做似乎是为索引= 4的项目渲染空间.

如果我尝试:

<li  *ngFor="let item of items; let i = index;" *ngIf="i < 4"> //Notice ngIF

没有显示任何内容.

有任何想法吗？

我有一个project包含一些属性和数组的对象,当我尝试像这样循环它时,它不起作用:

<img *ngFor="let image of {{project?.acf.images}}" src="{{image.image.url}}">

当我像这样显示它时{{project?.acf.images[0].image.url}},它完美地显示了网址.我的语法有什么问题吗？

为什么需要使用moduleId:module.id在使用时templateUrl的Angular 2组件.

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

@Component({
  moduleId:module.id,
  selector: 'my-app',
  templateUrl:`app.component.html`,
})

export class AppComponent  { name = 'Angular 2 website'; }

我正在使用model driven forms,我正在寻找一种更好的方法将数据绑定到相关的,formControlName因为我的表单上有超过25个字段,我不想为所有字段编写代码,因为我已经写了对于下面.

模板:

<input type="text"
       class="form-control"
       formControlName="firstName"
       name="firstName"
       placeholder="First Name"
       required>

组件:

this.refferalService.getReferringDataEdit(id).subscribe(
  result => {
    this.referringData = result.responseObject;
    this.refferalForm.patchValue({ 
      firstName: this.referringData.firstName 
    })
  }
)

有没有办法"自动"？

创建模型驱动的表单时，出现错误：错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup指令并将其传递给现有的FormGroup实例（您可以在类中创建一个）。

请告诉我这段代码出了什么问题。

app.component.html

<div class="col-md-6">
  <form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="sessionName">Session Name:</label>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group">
      <label for="abstract">Abstract:</label>
      <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

app.component.ts

export class CreateSession {

    newSessionForm:FormGroup;
    abstract : FormControl;
    name : FormControl;

    ngOInInit(){
        this.name = new FormControl('', Validators.required)
        this.abstract = new FormControl('', Validators.required)

        this.newSessionForm = new FormGroup({
            name:this.name,
            abstract: this.abstract
        })         
    }


    saveSession(formValues){
        console.log(formValues);
    }

我有一个列表,显示有时可能包含HTML的数据

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>

使用的问题innerHTML是HTML被解析和渲染,所以像<p>标签这样的东西会增加边距并破坏列表的对齐.

我想剥离所有的html标签,只输出纯文本.

像这样的方法:

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>

不剥离HTML,它只是将HTML作为纯文本输出.

如何剥离HTML并将纯文本保留为"Angular"方式？

我正在使用相同的组件进行编辑以及添加新条目。

if(this.action='edit'){
    this._PersonnelService.getUsersById(this.selectedperid)
      .subscribe((userdata: Iuser) => { this.personnel = userdata[0]; this.personnel.perid = this.selectedperid;console.log(userdata[0]); }, (error) => {
        this.statusMessage = 'Problem with service. Please try again.'
        console.error(error);
      });
   }
    else{     this.personnel=null}

  }

这意味着如果将this.action变量add this.personnel设置为null。

现在，在HTML中，我具有以下元素：

<input type="text"   class="form-control" name="PerFullName"  
[(ngModel)]="personnel.perfullname" id="fullname ">

我在控制台中收到大量错误。我的文本框不可见。
我该如何解决？