Question

好的，我在boot.ts中启动了一个服务，除了管理我的模板工作之外，一切正常。我为无法用HTML /角度语言表达自己而道歉，但我相信我的问题很明显。

我的简化* ngFor循环目前看起来像这样。

<div *ngFor="let comment of comments">
   <div>{{comment.body}}</div>
</div>

这是预期的输出，如下所示

<div>
  <div> First comment </div><!-- 1st comment_div closed -->
  <div> Second comment </div><!-- 2nd comment_div closed -->
     .....
  <div> Last comment </div><!-- last comment_div closed
</div>

相反，我想要的是以下

<div>
  <div> First comment 
    <div> Second comment 
     .....
       <div> Last comment </div>.....</div></div> <!-- All divs closing here-->
</div>

Answer 1

这是一个工作版本，只需将您的注释数组传递给该指令：

https://plnkr.co/edit/SbLJ3eEHU4BKGOPiXioZ?p=preview

function subjectUnderTest(callback:() => void) {
    ...
}

这就是你使用import {Component, Input, OnInit} from '@angular/core'; import {NgFor} from '@angular/common'; @Component({ selector: 'my-comment', providers: [], template: ` <div style="padding-left:20px;" *ngIf="subcomments && subcomments.length > 0"> {{subcomments[0] }} <my-comment [subcomments]="subcomments ? subcomments.slice(1): null"></my-comment> </div> `, directives: [NgFor, MyComment] }) export class MyComment implements OnInit { @Input() subcomments: Array<String>; ngOnInit(): void { console.log( this.subcomments.slice(1)); } }指令的方式：

my-comment

Answer 2

尝试这样的事情：里面的打字稿：

@Component({
    selector: 'comment',
    template: "<comment [comment]="comment" *ngFor="let comment of comments"> </comment> <div> {{comment?.body}} </div>",
    directives: [CommentComponent]
})
export class CommentComponent {
      @Input() private comment : Comment;
      private comments : Array<Comment>;
}

评论课

export class Comment {
    public comments : Array<Comment>;
}

这个想法是使用角度模板生成来生成树，直到没有更多级别。

Answer 3

行。因此，通过修改以前的答案，我设法完成它，虽然显然它浪费了CPU周期，我不知道它是否会产生可能不是静态的数据问题。

1st）ngFor应该与经典for循环更相似：for（var i = 0; i

反正

comment.ts

import { Component, OnInit, Input} from '@angular/core';
import {MyService} from 'somewhere';
import {MessagePost} from 'somewhere else';

@Component({
moduleId: module.id,
selector: 'comment',
templateUrl: 'comment.html',
directives: [CommentComponent], //This is important!
})
export class CommentComponent implements OnInit {

@Input() subcomments: Array<MessagePost>;

@Input() iterator: number =0;

constructor(private _myService: MyService) { }

ngOnInit() {
    if(!subcomments){this.subcomments = this._myService.getMessage();}           
}

}



comment.html (template)

<div style="padding-left:40px;" *ngIf="subcomments && subcomments.length>0 && subcomments.length -1 >iterator">
  {{subcomments[iterator].body}}
  <comment [subcomments]="subcomments" [iterator]="iterator + 1">   </comment>
 </div>

* AngFor2中的ngFor

3 个答案: