标签: angular-template

我正在使用Angular,我希望*ngIf else在此示例中使用(自版本4起可用):

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

我怎样才能实现同样的行为ngIf else？

我有一些元素,我想在某些条件下可见.

在AngularJS中我会写

<div ng-show="myVar">stuff</div>

我怎么能在Angular中做到这一点？

我的Angular代码出了什么问题？我正进入(状态:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

HTML

<ol class="breadcrumb">
    <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{active: step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自JSON.

然后,实例化的组件将自己注册为新选项卡.

我不确定这是否是"最佳"方法？Sofar我见过的唯一指南是静态标签,这没有帮助.

到目前为止,我只有主要引导的标签服务在整个应用程序中持续存在,看起来像这样的东西.

export interface ITab { title: string; }

@Injectable()
export class TabsService {
    private tabs = new Set<ITab>();

    addTab(title: string): ITab {
        let tab: ITab = { title };
        this.tabs.add(tab);
        return tab;
    }

    removeTab(tab: ITab) {
        this.tabs.delete(tab);
    }
}

问题:

1. 如何在收件箱中创建一个动态列表来创建新的(不同的)标签？我有点猜测DynamicComponentBuilder会被使用吗？
2. 如何从收件箱创建的组件(单击时)将自己注册为选项卡并显示？我猜ng-content,但我找不到有关如何使用它的更多信息

编辑:尝试澄清

将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件

Edit2:图片

http://i.imgur.com/yzfMOXJ.png

有什么区别:

{{::office.name}}

和

{{office.name}}

在angularJS？

我正在使用如下模板:

<ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    <div *ngIf="valm1 && valm1.type=='1'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='2'" (click)="modlTxt=valm1;notREadVu(j)" data-toggle="modal" data-target="#myModal">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='3'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
  </li>
  <li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()">
    <span class="title">Log Out <i class="fa fa-sign-out"></i></span>
  </li>
</ul>

所以它给出了以下错误:

EXCEPTION: Template parse …

我有一个组件,其模板看起来像这样:

<div [my-custom-directive]>Some content here</div>

我需要访问此处使用的MyCustomDirective类实例.当我想要访问子组件时,我使用ng.core.ViewChild查询.是否有相同的功能来访问子指令？

如何在元素中声明动态 模板引用变量ngFor？

我想使用ng-bootstrap中的popover组件,popover代码(带有Html绑定)如下所示:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

如何将这些元素包装在里面ngFor？

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

嗯......任何想法？

我是角色4的新手.我想要实现的是为我的应用程序中的不同页面设置不同的布局页眉和页脚.我有三种不同的情况:

1. 登录,注册页面(无标题,无页脚)

路线:['登录','注册']

2. 营销网站页面(这是根路径,它有一个页眉和页脚,大多数这些部分在登录前到来)

路线:['','关于','联系']

3. 应用程序登录页面(我在本节中对所有应用程序页面都有不同的页眉和页脚,但此页眉和页脚与市场营销网站页眉和页脚不同)

路线:['仪表板','个人资料']

我通过在路由器组件html中添加页眉和页脚来临时运行应用程序.

请告诉我一个更好的方法.

这是我的代码:

应用程序\ app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

应用程序/家/ home.component.html

<site-header></site-header>
<div class="container"> …

我看了类似的问题,但没有一个帮助过我.我将收到如下对象:

[
  {
    "id": 1,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 2,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 3,
    "name": "Salman",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.", …