标签: angular-template

考虑这个片段：

<div class="col-4" style="text-align: center;">
    <skin-stat-circle>{{statByType('Users')?.count}}</skin-stat-circle><br>
    <span>{{statByType('Users')?.label}}</span>
</div>

是否可以statByType('Users')像*ngFor使用一样分配给本地模板变量let...？

编辑

在@incaner 的帮助下解决了这个问题。这很强大——非常喜欢它。

<ng-template #statTemplate let-stat="stat">
   <div class="col-4" *ngIf="stat">
      <skin-stat-circle >{{stat.count}}</skin-stat-circle>
      <br>
      <span>{{stat.label}}</span>
   </div>
</ng-template>
<skin-stat-group>
   <div class="container">
      <div class="row">
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Users')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Projects')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Layers')}"></ng-container>
      </div>
   </div>
</skin-stat-group>

我有一个结构如下的对象列表：

[{item},{item},{item}]

我正在尝试创建一个带有角度的复选框列表，如下所示：

<form>
     <input *ngFor="let object of objects" type="checkbox"> {{object.name}}
</form>

复选框本身确实显示了，但我无法获取每个复选框中显示的对象的名称。我究竟做错了什么？

我的打字稿代码如下。

 selectedAll: any;
 selectedAllSecondname: any;

 this.name = [ {name: 'as', value: 'as', selected: false },
                {name: 'bs', value: 'bs', selected: false },
                {name: 'cs', value: 'cs', selected: false } ];
 this.Secondname = [ {name: 'dd', value: 'dd', selected: false },
                {name: 'ee', value: 'ee', selected: false },
                {name: 'ff', value: 'ff', selected: false } ];
 this.Thirdname = [ {name: 'gg', value: 'gg', selected: false },
                {name: 'hh', value: 'hh', selected: false },
                {name: 'ii', value: 'ii', selected: false } ]; …

我想使用ngIf更改在迭代中显示的名称，我正在尝试执行以下操作：

*ngIf="detail.name=='dieselG_d'? detail.name='Diesel Green':Diesel Red

并且控制台记录了以下错误：

Uncaught Error: Template parse errors:

我的表使用芯片输入“类型”下的值。但是当其中没有值时。里面还有一块空芯片。有谁知道我该如何解决这个问题？

[![html

 <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="type">Type</th>
      <td mat-cell *matCellDef="let truck" class="pr-24">
        <mat-chip-list>
          <span *ngFor="let truck of truck.type.split(',')">
            <mat-chip>{{truck}}</mat-chip>
          </span>
        </mat-chip-list>
      </td>
  </ng-container>][1]][1]

component.ts

import { Component, OnInit, ViewChild, ElementRef, Input, OnChanges } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatChipsModule,  MatChipInputEvent } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { Truck } from '../truck';
import { MapsAPILoader } from '@agm/core';
import { TruckDetailComponent } from '../truck-detail/truck-detail.component';
import { PlannerProject } from 'app/services/planner-projects/planner-project';
import { TrucksService …

有一个从api加载的用户列表

<div ng:controller="UserController">
    <li ng-repeat="user in users">
         <a ng:click="select(user)">
            {{user.first_name}} {{user.last_name}}
         </a>
    </li>
</div>

单击用户时,我想打开一个额外的视图,显示用户的一些详细信息.想象一下这样的观点

小蓝色区域是选定的用户,大蓝色区域是显示详细用户信息的容器.

function UserController($scope){
    $scope.select = function(user){
        console.log(user);
    }
}

因此,当单击用户时,我可以记录用户对象.它一直有效.但我绝对不知道如何打开充满用户数据的额外容器.

有没有办法简单地从文件系统加载模板,传递对象并将整个事物附加到当前视图？我怎么用angular.js做这个？

嗨还有一个问题,我有角度的下一个配置:

angular.module('ow', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/:placeId', {templateUrl: 'partials/menu.html',   controller: MenuCtrl}).
    when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
    when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
    when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
    when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
    when('/waiter/:redirect', {templateUrl: "???????", controller: WaiterCtrl}).
    otherwise({redirectTo: '/0'});
}];

代替 "？？？？？" 我需要放置动态网址,尝试在控制器中执行以下操作:

function WaiterCtrl($routeParams, $location, sharedData, $http, $route) {
$http.get(config.urls.ajaxWaiter + "{\"p\":\"" + sharedData.getOrderCart().orderPlace + "\"}").success(function(dataDetails) {
    if ($routeParams.redirect == "menu") {
        $route.templateUrl = "partials/menu.html";
        $location.path("/");
    }
    if ($routeParams.redirect == "menuDetails") {
        $route.templateUrl = "partials/menu-details.html";
        $location.path("/menu/" + sharedData.getMenu());
    } …

所以我在index.html下面:

<div ng-controller="UsersController">
<div ng-include='"assets/users/partials/template.html"'></div>
<a ng-click="get_data()">Get</a>
</div>

Template.html:

<input type="text" ng-model="SearchUser" name="SearchUser" />

我的控制器:

app.controller('UsersController', ['$scope', function($scope) {
    $scope.get_data = function(){ console.log($scope.SearchUser); };
}
]);

所以在单击锚点的上述情况下,我在$scope.SearchUser范围值中未定义.但是,如果我从模板中取出输入并放入主HTML,它就可以工作.

我检查了多个控制器声明和其他东西,但没有任何对我有用.

我使用角1.2.25版本.

我知道这可能会得到一个答案,但是对于延迟加载实现本身来说更多.

所以,这是一个典型的UI-Router配置块:

app.config(function($stateProvider, $urlRouterProvider, $injector) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'view_home.html',  // Actually SHOULD BE result of a XHR request ....
            controller: 'HomeCtrl'
        });
});

但是,如果我想在templateUrl请求($stageChangeStart)时加载它,那将是基于AJAX请求的.

应该如何实施？LARGE角应用程序如何处理这个问题？

我在Angular 6中做了一个Web应用程序.我从Firebase接收了一组对象,我正在尝试向用户显示详细信息ngFor.我的对象数组是这样的:

export interface Competition {
  createdAt: Date;
  sessions: Session[];
}

export interface Session {
  date: Date;
  program: Program[];
  events: Event[];
}

export interface Program {
  name: string;
}

export interface Event {
  name: string;
}

在我正在做的模板内:

<ng-container *ngFor="let competition of competitions; index as i">
   <h3>{{competition.name}}</h3>
   {{competition.sessions[i].program.length}}
   {{competition.sessions[i].events.length}}
</ng-container>

读取未定义的属性"program",读取未定义的属性"events"

我试过了:

{{competition[i].sessions[i].program.length}}
{{competition.sessions[i].program.length}}
{{competition[i].sessions[i].program[i].length}}

我的目标是显示的长度program和events.