标签: angular2-template

我有一个子组件，从其父组件接收数据并在 div 中显示文本。父母可能将其undefined作为数据发送。当它这样做时，div 应该将其高度转换为 0，这是我通过 css transition 完成的。由于我不知道文本的长度，因此 div 的高度应该转换为auto. 我找到了一个这样做的代码示例，我已经将其转换为适合我的组件。

export class LanguageDetail implements OnChange, OnInit {
    @Input() language: Language
    @ViewChild("detailPanel") detailPanel: ElementRef;

    private shownLanguage: Language;

    ngOnInit() {
        this.shownLanguage = new Language();
    }

    ngOnChange() {
        if (this.detailPanel) {
            var detailPanel: JQuery = $(this.detailPanel.nativeElement);

            if (this.language) {
                ...
                // calculate the end height and apply a transition with fixed values to this.shownLanguage
                this.shownLanguage = this.language;

                oldHeight = detailPanel.height();
                detailPanel.height("auto");
                newHeight = detailPanel.height();
                detailPanel.height(oldHeight);
                ...
            } else …

我routerLinkActive在我的主要路由中使用。

<a [routerLink]="/user" routerLinkActive="active">Bob</a>

当 URL 为 时/user，active类会被添加到a标签中，但在主路由下，我还有一些辅助路由，所以当 URL 为 时/user/aa，将删除 active。

我希望当 URL 是/user/aaor 或 时/user/bb，主路由的类active仍然存在。

我该怎么办？

所以我目前正在尝试创建嵌套评论，并且我目前正在引入一个动态表单组件，以便人们可以回复评论。当只有父母和孩子时它很有效，但如果有兄弟姐妹，它会选择第一个。例如，

--[Root Comment]
    --[Child Comment]
        --[1 - Grandchild]
        --[2 - Grandchild]
        --[3 - Grandchild]

如果我点击<a>包含选择器的第三个孙子的标签，#replylink表单将被附加到第一个孙子 - 因为他们都有#replylink.无论如何我可以使这个标签动态吗？喜欢#replylink{{comment.id}}然后能不能更新@viewchild就可以找到了？

编辑：

@Component({
  moduleId: module.id,
  selector: 'commentsLoop',
  templateUrl: 'comments.loop.component.html',
  entryComponents: [CommentsFormComponent],
  directives: [CommentsLoopComponent]
})

export class CommentsLoopComponent implements OnInit {
    @Input() childComments:any;
    @Input() type:any;
    @Input() id:any;
    @ViewChild('replylink', {read: ViewContainerRef}) viewContainerRef;
    voteSubscription:any;

  private componentFactory: ComponentFactory<any>;
    constructor(private _http:Http, private _modal:ModalComponent, componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler, private _auth: AuthService){
        this.componentFactory = componentFactoryResolver.resolveComponentFactory(CommentsFormComponent);
    };
    ngOnInit(){};

    commentReply(id,generation,child){
            let instance = …

<div *ngFor=let item of item >
      <img  src="./assets/img/thumb-up.png"/>
    </div>

here is the loop by which the list of images created i only want to change the only image on which the mouse is hove i have tried <img [src]="source" on-mouseover="changeimage()"/> but it changes the whole list images So whats the solution for this

<div #dataContainer class="infills richtextbox {{field.groupid}}"
                    contentEditable="true" 
                    *ngIf="field.fieldtype=='text'"
                    id="{{field.id}}" 
                    name="{{field.id}}" 
                    [ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px','font-size': field.fontsize,'font-family':field.fontfamily,'width':field.width+'px','height':field.height+'px','border':'1px solid #FFF','background':'#EEE','overflow':'hidden' }"
                    title="{{field.description}}"
                    [(ngModel)]="field.value" 
                    (keypress)="_keyPress($event,field.pattern)"
                    (dblclick)="openFullRTE(field.id)" 
                    (focusout)="field.htmlContent=dataContainer.innerHTML;">
</div>

在这里，我想看看field.description是否具有值“desc”，如果是，则将值分配为空给title属性，否则它可以包含 field.description 中的值。我怎样才能做到这一点？可以使用三元运算符吗？

我在我的 angular2 应用程序中使用 Primeng。我需要一个简单的按钮，并希望在按钮悬停时更改背景颜色。任何人都可以帮助如何实现这一目标？请在下面找到我的代码：

<button pButton type="button" label="{{item}}" class="reasonButton"></button>

.reasonButton{
  background-color:#ececec;
  color:#000;
}

什么会渲染得更快？

  <div class="ololo" [ngClass]="{'my-class': myVar}">one</div>

或者

  <div class="ololo {{myVar ? 'my-class': ''}}">another</div>

或其他方式？

我尝试在模板表单中使用 min 验证，但没有用。如何以模板形式使用它？谢谢你的帮助。

      <input type="number" class="form-control" name="srvc_sub_cnt{{i}}" 
          [ngModel]="s?.srvc_sub_cnt" (ngModelChange)="s?.srvc_sub_cnt?
               s.srvc_sub_cnt=$event:null"
          required #srvc_sub_cnt="ngModel" pattern="^[0-9]+$" min="1">

        <div class="cell table-info" *ngIf="srvc_sub_cnt.errors?.min" class="form_error">
                    Service Subscribers must be greater than 0.
                  </div>

我想将我的枚举显示为字符串，但将其显示为数字。

我正在从Web服务接收json对象，并将其映射到我的Typescript对象

getProperties(): Observable<Property[]> {
    return this.http.get<Property[]>(this.getallagentsproperties + '1');
}

export enum LetType {
    Notspecified = 0,
    LongTerm = 1,
    ShortTerm = 2,
    Commercial = 4
}

export class Property {
    ...other stuff...
    letType: LetType;
    ...other stuff...
}

我的组件会进行调用并将其添加到相关属性中

import { Component, OnInit } from '@angular/core';
import { Property } from './Property';
import { PropertyService } from '../properties.service';

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

export class PropertiesComponent implements OnInit {
  properties: Property[];
  constructor(private propertyService: PropertyService) { }
  ngOnInit() {
    this.getProperties() …

在我们的角度应用程序中，我从控制器返回了一个字典。如何使用* ngFor在html模板中显示相同内容？

请任何人帮助实现相同