我正在使用Angular Material 2创建一个带有选择列表(每个列表项的复选框)的工具栏.我无法弄清楚如何在列表显示之前设置复选框,然后在用户交互后获取所选项目.
我在一个Form中尝试控制,认为我可能需要这个绑定到ngModel,但这似乎没有帮助.到目前为止,我的HTML是:
<form
novalidate
#areaSelectForm="ngForm">
<div>
<mat-selection-list
#areasList="ngModel"
[(ngModel)]="model"
id="areaListControl"
name="areaListControl"
(ngModelChange)="onAreaListControlChanged($event)">
<mat-list-option *ngFor="let tta of taskTypeAreas" (click)="onCheckboxClick($event)" [value]="tta">
{{tta}}
</mat-list-option>
</mat-selection-list>
</div>
</form>
这必须是一个很好的路径,但文档很难解释,我似乎找不到任何合适的例子.
任何指导都非常欢迎.
在我的 Angular 应用程序中，我有一个选择器文件plan.selectors.ts，其中有一些非常复杂的选择器。检索数据时会执行大量计算，其中一些计算与应用程序中其他位置的业务逻辑共享。举一个简单的例子，我有一个DateService使用该Moment库的函数，它为应用程序提供了函数，例如getDatePlusHours我可以传入一个Date和几个小时，然后它返回新的日期。我希望能够在我的DateService选择器中使用此功能，但我只是想不出一种方法来做到这一点，因为我看不到如何注入服务。
plan.selectors.ts我正在尝试做的事情的简化看起来像这样：
import { createFeatureSelector, createSelector } from '@ngrx/store';
const getPlanFeatureState = createFeatureSelector<PlanState>('plan');
export const getStartDate = createSelector(
state => state.startDate
);
export const getDuration = createSelector(
state => state.duration
);
export const getEndDate = createSelector(
getStartDate,
getDuration,
(startDate, duration) => {
return dateService(startDate, duration);
}
);
我试图防止将大量服务函数复制到我的选择器文件中。任何建议都非常欢迎。
我正在Visual Studio 2015中开发一个MVC6项目.我刚刚使用Bower添加了Bootstrap 3.3.6.在一个非常简单的html页面上,我引用了标题中的CSS和正文底部的Bootstrap,如下所示:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
我定义了一个按钮如下:
<button class="btn btn-primary">Hello</button>
当我调试项目(IIS,IE11)时,按钮出现并且由Bootstrap显式设置,但没有手形光标.
如果我使用浏览器导航到Bootstrap样式按钮的示例,例如:http://www.w3schools.com/bootstrap/bootstrap_buttons.asp,手形光标将按照我的预期显示.所以这不是我的浏览器的错.
任何人都可以建议为什么我没有从一个简单的Bootstrap风格的按钮获得手形光标吗？
我正在尝试为项目准备结构,我知道这个项目的复杂性会增加.我想使用ASP.Net Core MVC进行顶级导航.在每个主视图中,我想放置一个Angular 2应用程序.
我已经开始使用这个Yoman模板,用ASP.Net核心模板构建一个起点Angular 2.这建立并运行良好.
在我的项目的根目录中,我想要一个AngularApps文件夹,并在每个Angular App的文件夹中,例如"Scheduling","Utilities","Equipment".
有几个我无法理解的问题:
dist文件夹AngularApps吗？boot-client和boot-server文件提供其相应的应用程序文件夹中的每个角2应用程序？在我看来,从一开始就计划实施多个Angular 2应用程序是一种务实的方法,每个应用程序都有更专注的责任.我找不到任何关于如何实际完成这项工作的明确例子.我相信这对很多人来说都很有价值.
非常感谢.
我正在开发一个通过运行开始生活的Web应用程序dotnet new angular(清除博客使用说明).
为了扩展默认代码的功能,我开始开发Web API.我添加了一个名为3个新的.NET核心库项目Shared,Scheduling和Scheduling_Tests.
定义了一些域模型类,定义了Scheduling一些基类Shared,最后定义了一些NUnit测试ShedulingTests.
当我构建解决方案时,我的Web应用程序项目中出现了2个新文件夹:Shared和Scheduling.我也遇到如下构建错误:
Error CS0579 Duplicate 'System.Reflection.AssemblyCompanyAttribute'
我不知道这个去哪里,任何建议都会非常受欢迎.
我正在开发一个 Angular (4.1.2) Web 应用程序以及相应的 ASP.Net Core (1.1) Web API。
我有一个 Angular 服务，它向我的 Web API 发出数据 http 请求，并且从 Angular 服务返回的对象中的日期不是类型Date。
Tasks在我的场景中，我的 Web 应用程序从 SQL 数据库获取数据，每个应用程序都Task包含 start 和 finish DateTime。我的 TasksController 使用 AutoMapper 将每个任务映射Task到一个TaskViewModel对象，并且我的 TasksControllerTaskViewModel有一个类型为 的 start 和 finish 属性DateTime。
如果我在 TasksController 中放置一个断点并检查TaskViewModel要返回的对象，那么在请求之后，开始和结束属性都是类型DateTime，因此日、月、小时等都可以。
在 Angular 中，我有一个task-api.service.ts包含以下代码的文件：
public getTasks(): Observable<Task[]> {
let tasksArray: Observable<Task[]> = this.http.get("/api/tasks").map((response: Response) => {
return <Task[]>response.json();
}).catch(this.handleError); …我正在使用 Visual Studio 2017 开发一个 Angular 项目，并且一直在尝试将 Typescript 更新到 v3.2.1。我从微软下载了安装程序并安装了它。在C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.2文件夹中查看，我注意到没有tsc.exe文件。我回头看了看我的C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.1文件夹，那里有一个tsc.exe文件。
为了通知 Visual Studio 新版本，我调整了环境变量 > 系统变量中的路径以指向新C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.2\文件夹。在此更改后，该命令tsc -v不再有效。这是因为tsc.exe文件夹中没有文件吗？
让我感到困惑的是使用 NPM 安装 Typescript 的选项，它似乎将它安装到我的user/AppData/Roaming/npm文件夹中。我应该两者都做吗？
任何建议将非常受欢迎。
我正在尝试创建我在Visual Studio 2015中开发的ASP.Net Core项目的第一次迁移.我的解决方案只有一个Project.我的project.json文件位于Project文件夹的根目录中.
我右键单击项目并选择"打开命令行>默认"并输入以下内容:
dotnet ef migrations add InitialDatabase
命令行返回:
No project was found. Change the current working directory or use the --project option.
我尝试了所有不同版本的EntityFrameworkCore和Tools.我的project.json文件如下:
{
"dependencies": {
"Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
"Microsoft.AspNetCore.Diagnostics": "1.0.1",
"Microsoft.AspNetCore.Mvc": "1.0.1",
"Microsoft.AspNetCore.Mvc.TagHelpers": "1.0.1",
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.1",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
"Microsoft.AspNetCore.StaticFiles": "1.0.1",
"Microsoft.EntityFrameworkCore": "1.0.2",
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.2",
"Microsoft.EntityFrameworkCore.Design": {
"type": "build",
"version": "1.0.2"
},
"Microsoft.EntityFrameworkCore.Tools": {
"type": "build",
"version": "1.0.0-msbuild3-final"
},
"Microsoft.EntityFrameworkCore.Tools.DotNet": "1.0.0-msbuild3-final",
"Microsoft.Extensions.Configuration.Json": "1.0.1",
"Microsoft.Extensions.Logging.Console": "1.0.1",
"Microsoft.NETCore.App": {
"type": "platform",
"version": "1.0.1"
}
},
"tools": …我正在开发一个 Angular 7 Web 应用程序，并且正在努力解决Mat-Selection-List我允许用户拖放mat-list-option项目的问题。
每个mat-list-option项目都包含一个div，它使用 Flex Layout 来排列其组件，如下所示：
<mat-selection-list #taskGroupSelectionList
cdkDropList
[(ngModel)]="selectedOptions"
(ngModelChange)="onNgModelChange($event)"
(selectionChange)="onSelectionChange($event)"
class="task-group-list"
(cdkDropListDropped)="drop($event)">
<mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>
<!-- Task Group Item -->
<div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">
<!-- Move Handle -->
<div fxFlex="32px" style="padding: 0 0 0 4px;">
<mat-icon class="summary-channel-handle">menu</mat-icon>
</div>
<!-- Index -->
<div fxFlex="24px;">
<p style="margin: 0; text-align: right;">
{{taskGroup.orderId}}:
</p>
</div>
<!-- Title -->
<div fxFlex="nogrow"> …Angular 4.4.4 Angular Material 2.0.0-beta.12
我正在尝试实现桌面布局，其中屏幕顶部有一个 Angular Material Toolbar，router-outlet下面的内容填充剩余的屏幕高度。我希望router-outlet内容填充屏幕高度，以便我可以将任何子/孙组件的高度设置为 100%，直到我想提供滚动条为止。
我已经回到基础去尝试只div用一个边框来填充工具栏下方剩余的空间，但我什至无法让它工作。看起来好像替换的组件router-outlet是全屏的高度，不考虑其上方的工具栏。
我app.component的如下：
<div id="app-component" style="height: 100%; border: 1px solid red;">
<!-- Application Toolbar -->
<mat-toolbar id="mat-toolbar" color="primary" style="margin: 0; padding: 0;">
<span style="padding-right: 16px;">Indigo</span>
<nav id="tabNavBar" #tabNavBar mat-tab-nav-bar>
<a mat-tab-link *ngFor="let tabNavLink of tabNavLinks"
[routerLink]="[tabNavLink.path]"
routerLinkActive
#rla="routerLinkActive"
[routerLinkActiveOptions]="{exact: true}"
[active]="rla.isActive"
(click)="onClickTab(tabNavLink)"
style="height: 64px;">
{{ tabNavLink.label }}
</a>
</nav>
</mat-toolbar>
<!-- Application Module Content -->
<router-outlet></router-outlet>
</div>
目标组件router-outlet如下：
<div …角 4.4.4
角材料 2.0.0-beta.12
我创建了一个包含以下mat-select元素的模板驱动表单：
<mat-form-field class="add-task-full-width">
<mat-select matInput
[(ngModel)]="taskForCreation.areaId"
id="areaControl"
#areaControl="ngModel"
name="areaControl"
required
(ngModelChange)="onAreaChanged($event)"
placeholder="Area">
<mat-option *ngFor="let area of areas" [value]="area.id">
{{ area.description }}
</mat-option>
<mat-error *ngIf="areaControl.hasError('required')">
Area is <strong>required</strong>
</mat-error>
</mat-select>
</mat-form-field>
如果我在没有从列表中选择项目的情况下跳出该字段，控件会变为红色并变为无效，但错误消息显示在列表底部，而不是控件下方。无论我尝试什么，我都无法改变这一点。
谁能看到我哪里出错了？