标签: angular2-template

使用 AngularJS 2.3.1，在以下 html 模板代码中：-

<table>
   <tr>
     <th>col 1</th>
     <th>col 2</th>
   </tr>
   <tr>
     <td>sum 1</td>
     <td>sum 2</td>
   </tr>
   <tablerow *ngFor="let i of data" [item]="i"></tablerow>
</table>

其中tablerow组件 html 模板是：-

<tr>
  <td>{{item.col1}}</td>
  <td>{{item.col2}}</td>
</tr>

当它被渲染时，组件生成的表行不会像普通表行那样被破坏。

为什么会发生这种情况？我需要做什么来解决这个问题？这是一个错误吗？

我有一个存储十六进制颜色值的 JSON 文件option.colorChips.primary.hex，我想为每种颜色创建一个按钮，其中按钮的背景就是相关的颜色。（注：option.colorChips.primary.hex仅包含6位十六进制代码，不包含#）

这是我的模板：

<ng-container *ngFor="let color of style.colors">
  <h1>{{ color.category }}</h1>
  <ng-container *ngFor="let option of color.options">
    <button [style.background]="option.colorChips.primary.hex">{{ option.name }} Color </button><br />
    {{ option.colorChips.primary.hex }} <br />
    </ng-container>
    <hr />
</ng-container>

你可以在第 4 行看到我的尝试。为什么这不起作用？

我有两个与父子关系相关的组件。父组件的 ngOnInit 方法检查用户是否登录，如果未登录，则导航到登录页面。

class ParentComponent implements OnInit{
    ngOnInit(){
        if(!authService.loggedIn){ 
           //navigate to login screen code
           return;
        }
    }
}

class ChildComponent implements OnInit{
    ngOnInit(){
        /** POINT TO BE NOTED **/
        // this function is also called even if ngOnInit 
        // of parent navigates to different component and returns.
        // do some stuff with userService.token
        // but because token isn't available the calls fail
    }
}

如果父组件想要导航到其他组件，如何阻止此级联 OnInit 调用？

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata

export class MyComponent {

}

所以，上面是我实际的组件文件。如果我还有别的课

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata

export class MyComponent {

}

export class MyAnotherComponent {

}

和

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata
@Component({
   selector: 'my-cmpnt',
   template: '<div>Hello Something!</div>'
}) // here component metadata

export class MyComponent {

}

现在，我有任何错误吗？会发生什么？

实际上，我正在使用 Material2 设计来开发 Angular 4，所以我偶然发现了它<md-dialog>，并决定在我的应用程序中使用。

应用程序包含一个固定的 标题position:fixed和一个固定的侧边栏侧边栏。

我使用过<md-dialog>，是的，它工作正常，直到页面不滚动，但是当页面滚动到页面底部的某个位置时，单击触发<md-dialog>异常行为的按钮时，会出现固定位置 div隐藏在<md-dialog>

工作插件：https://plnkr.co/edit/1F5La3HPmd8RxXtPip3o? p=preview

有什么帮助消除这种行为吗？

每当我在视图模板中尝试类似的操作时，它都会按预期工作。

{{20*30}}

但每当我尝试

{{somevalue1*somevalue2}}

其中somevalue1和somevalue2两者都来自组件并且somevalue2来自 api 并且它位于数组内，它显示 NaN。

该怎么处理呢？

是因为 String 值吗？

如何将其转换为模板中的数字？

我已经成功实现了继承一个类。我想从模板调用 super 方法，但现在我得到的是Cannot read property 'presentModal' of undefined：

@Component({})
class Dia {
    constructor(public modalCtrl: ModalController) {
    }

    presentModal() {
        const detailModal = this.modalCtrl.create(AgendaDetails, { showDetails: 8675309 });
        detailModal.present();
    }
}

@Component({
    templateUrl: 'dimarts-tab.html',
})
export class Dimarts extends Dia { }

并在模板中：

<ion-item text-wrap (click)="super.presentModal()">

我也试过 $super, $parent 没有成功。目前唯一可行的解​​决方案是在其中创建方法Dimarts并在那里调用 super 。

有任何想法吗？

我有一个来自 API 的动态 json，如下所示：

 {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}

我在模板中编写了以下 HTML 代码，其中我从资产文件夹中获取 image-1、image-2 徽标

  <div class="row">
    <div class="col-6" (click)="cityClick('Bangalore')">
      <div class="img-1">
        // my image-1 logo goes here
      </div>
      <div class="img-text">
        Bangalore
      </div>
    </div>
    <div class="col-6" col-6 (click)="cityClick('Mumbai')">
      <div id="image_block" class="img-2">
        // my image-2 logo goes here
      </div>
      <div id="text_block" class="img-text">
        Mumbai
      </div>
    </div>
  </div>

如何在单击图像时获取 json 的键并从相应的键值中显示图像下方的文本。当我点击时，我应该能够在点击事件中传递键和文本。请帮助，因为我是 Angular 的新手！

我想创建一个组件，其中包含一个ng-select组件，我向该组件传递一组复杂对象以及要在下拉列表中显示的字段和所选值的定义。您可以ng-select指定要显示的字段 ( bindLabel) 并定义一个模板来显示所选值（您可以显示对象中的一个或多个字段或其他 HTML 标记）。我能够传递 的值bindLabel，但无法弄清楚如何插入模板。

例如，这就是我通常使用的方式ng-select。在本例中，我显示对象的两个字段和一些 HTML（将缩写字段加粗），并在下拉列表中列出缩写字段：

子组件

  items = [
    { name: 'United States', abbreviation: 'US' }, 
    { name: 'United Kingdom', abbreviation: 'UK' }, 
    { name: 'Canada', abbreviation: 'CA' }
  ];
  displayField = 'abbreviation';

子模板

  <ng-select [items]="items" 
           bindLabel="displayField"
           [(ngModel)]="model"
           name="ngselect" 
           (change)=emitModelChanged()>
      <ng-template ng-label-tmp let-item="item">
          <b>{{item.abbreviation}}</b> - {{item.name}}
      </ng-template>
  </ng-select>

要从父组件动态配置它，我传递items,displayField和template作为输入：

父组件

  selectedTemplate = '<b>{{item.name}}</b> - {{item.abbreviation}}';

父模板

  <child-component [model]=model 
                   [items]=items
                   [displayField]="'abbreviation'"
                   [template]=selectedTemplate …

我是角度2的新手,在多个组件中,我在一个文件夹文件中编写了两个组件,我已经在第一个文件中导入第二个类并给出了指令:class但它显示错误!这里是app.module.ts文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
 })
export class AppModule { }

这里是第一个组件文件app.component.ts

import { Component } from '@angular/core';
import { mydetailsComponent } from './app.details';

@Component({
   selector: 'my-app',
   template: `<h1>Welcome to this Application...</h1>
   <p>We have the App details here:</p>
   <mydetails></mydetails>
   `
  directives: [ mydetailsComponent ] })
export class myAppComponent { }

这里是第二个组件文件app.details.ts

import { …