我使用模板文件创建了一个寻呼机小部件,我在HTML页面中使用了两次.我有一个选择转到页面选项以及上一页和下一页的链接.
问题是当我使用选择框更新当前页面时更新,然后我使用上一页和下一页链接,当前页面会更新,但选择框不会更新.
请告诉我我做错了什么.我的构建这样的寻呼机小部件的方法有什么逻辑错误吗？
控制器代码:
var gallery = angular.module('gallery', []);
gallery.controller('ItemListCtrl', ['$scope', function($scope){
/* Pagination Code */
$scope.currentPage = 1;
$scope.itemsPerPage = 24;
$scope.total = 100;
$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
$scope.prevPage = function (){
if($scope.currentPage > 1){
$scope.currentPage--;
}
};
$scope.nextPage = function (){
if($scope.currentPage < $scope.pageCount()){
$scope.currentPage++;
}
};
$scope.pageCount = function (){
return Math.ceil($scope.total …如果角度2中存在模板错误,则整个应用程序无法工作.
是不是只有具有导致错误的模板的组件才能工作,而应用程序的其余部分工作正常？
如何处理错误,以便在发生错误时应用程序不会停止响应？
在angular 1中，我可以将任何元素定义为root元素，并且不能替换任何已编写的内联HTML。例如角度1。
<body>
<div ng-app="">
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
但是在角度2中，如果我这样写的话。
<body>
<ng-app>
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</ng-app>
</body>
并且我用ng-app作主/根组件选择器，将ng-app元素的innerHTML 替换为组件的HTML。
@Component({
selector: 'ng-app',
template:'<h1>App works</h1>";
directives: [UsersComponent]
})
即ng-app现在的innerHtml 变为<h1>App works</h1>。我希望ng-app保留以前的内容。
如果这不可能，我可以做下面的事情。
<body>
<ng-app>
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
<render-component-here></render-component-here>
</ng-app>
</body> …我想动态更改ngTemplateOutlet中的模板.当selectedTab更改时,ngTemplateOutlet将更改.
我有两个基本模板,名为#Tab1和#Tab2.
注意:我正在使用角度版本4.
选项卡菜单示例(HTML):
<div class="tabMenu">
<ul>
<li *ngFor="let tab of tabLinks" [class.active]="selectedTab.name === tab.name">
<a (click)="selectedTab = tab">{{ tab.name }}</a>
</li>
</ul>
<div class="tabContent">
<tab [data]="selectedTab.data">
<ng-container *ngTemplateOutlet="selectedTab.name;context:selectedTab"></ng-container>
</tab>
<ng-template class="tab1" #Tab1 let-test="data">
<p>Template A - {{ test }}</p>
</ng-template>
<ng-template class="tab1" #Tab2 let-test="data">
<p>Template B - {{ test }}</p>
</ng-template>
</div>
</div>
这是基本的打字稿数组:
tabLinks: Array<Object> = [
{
name: "Tab1",
data: "data tab 1"
},
{
name: "Tab2",
data: "data tab 2"
}
];
selectedTab: Object = …我有这样定义的变量：myVar: Observable<Observable<MyObject>[]>。
我正在使用Angular4功能枚举异步管道
*ngFor="let obsMyObject of (myVar | async)"
现在我有MyObject的Observable，但是我只需要MyObject。我可以这样写：
<div *ngFor="let obsMyObject of (myVar | async)">
<div *ngIf="let obsMyObject | async; let MyObject"></div>
</div>
但我无法在内部div中执行此操作，因为我正在设置flex order（对内部div没有任何影响）属性，因此我需要这样的操作：
<div *ngFor="let obsMyObject of (myVar | async); let MyObject = (obsMyObject | async)"
[style.order]="MyObject.order">
</div>
我只是有一个想法如何做到这一点，我尝试了：
<div *ngFor="let obsMyObject of (myVar | async); let MyObject = obsMyObject)">
{{MyObject}}
</div>
但是MyObject是未定义的，因此let MyObject = (obsMyObject | async)无法正常工作。
我有一个使用内容投影的组件。
<ng-content select="button">
</ng-content>
我想在我的组件中做这样的事情：
@ContentChild('button') button: ElementRef;
但是，当我检查时this.button，它undefined同时在ngAfterViewInit和 中ngAfterContentInit。
如果我的内容子元素是原生元素而不是自定义组件，我该如何选择它？
我使用角材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改.mat-horizontal-content-container. 但是当我添加时它不起作用.mat-horizontal-content-container{padding:0 !important;}这个问题有什么解决方案吗？
css angular-template angular-material angular angular-material-7
为什么要在 Angular 中的内置指令ngTemplateOutlet和ngComponentOutlet 上使用cdkPortal。它们不是都提供相同的功能吗？CDK 门户中是否有没有内置指令的特定功能？
它显示模板有错误，
错误：
我的html
<input type="text" [(ngModel)]="mymessage"
<button (click)="clickMe()"> send</button>
<br><br>
<h1>{{result | json}}</h1>
我的组件.ts
import {Component} from "@angular/core";
export class MyComponent {
private result: any;
constructor()
}
我创建了一个可重用的组件来呈现表格。它目前适用于基本表格，但在某些情况下我希望能够自定义表格中的单个列/单元格。
这是我在父组件中使用的代码：
<!-- PARENT TEMPLATE -->
<app-table
[headers]="headers"
[keys]="keys"
[rows]="rows">
</app-table>
// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
{ 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
{ 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];
我在子组件中使用的代码：
<!-- CHILD TEMPLATE -->
<table>
<thead>
<tr>
<td *ngFor="let header of headers">
{{ header }}
</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let key of keys">
{{ render(key, …angular-template ×10
angular ×9
angularjs ×2
angular-cdk ×1
angular-pipe ×1
angular6 ×1
css ×1