小编rca*_*a02的帖子

Angular 4 - 如何让我的复选框更改变量的值?

我对Angular 4很新,我想将变量的值从"hours"更改为"days",并将我的ngModel给出的值除以8.我究竟要怎么做呢?

以下是我的summary.component.html的摘录:

<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

<div class="panel-body">
    <form class="form-horizontal" role="form" style="overflow-x:auto;">
      <fieldset>
        <div class="col-xs-6">
          <div class="form-group" *ngIf="empInfo && empInfo.length > selectedIndex">
            <label class="col-xs-2" style="font-weight: bold;"> &#43; </label>
            <label class="col-xs-4"> Carryover </label>
            <div class="col-xs-6">
              <input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedIndex].PTOCarry + timeVar" name="ptoCarry"/>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
</div>
Run Code Online (Sandbox Code Playgroud)

然后这是我的summary.component.ts:

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmpInfoService …
Run Code Online (Sandbox Code Playgroud)

checkbox angular

10
推荐指数
1
解决办法
5万
查看次数

Angular-Calendar:没有 DateAdapter 的提供者

在我新创建的 Angular 应用程序中,我尝试使用 mattlewis92 的 Angular-calendar 来创建他的日历。我已经复制了他的 github 上列出的所有步骤和代码: https: //mattlewis92.github.io/angular-calendar/#/kitchen-sink但我不断收到错误消息Error: StaticInjectorError(AppModule)[CalendarDayViewComponent -> Date Adapter]: NullInjectorError: No provider for DateAdapter!

在我的中app.module.ts,我有这个,并且也导入了所有这些:

imports: [
    CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory
    })
]
Run Code Online (Sandbox Code Playgroud)

我唯一看到的问题是我也使用 Moment,所以我的提供程序中有这个:

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }

任何关于为什么会发生这种情况或我将如何解决它的帮助将不胜感激,谢谢!

angular angular-calendar

5
推荐指数
1
解决办法
5055
查看次数

类型{的参数:static:boolean; }无法分配给类型{read ?: any}的参数

在我新创建的Angular应用中,我试图使用mattlewis92的angular-calendar来创建他的日历。我已经复制了他的github上列出的所有步骤和代码:https : //mattlewis92.github.io/angular-calendar/#/kitchen-sink,但是我在第一行上一直遇到错误,@ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;也就是说“类型{的参数:静态:布尔值;}无法分配给类型{的参数?这是其余的代码供参考,但我认为这并不重要:

import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef} from '@angular/core';
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarView } from 'angular-calendar';

import * as _moment from 'moment';
import { JQ_TOKEN } from '../common/jQuery.service';
const moment = _moment;

const colors: any = {
  red: {
    primary: '#ad2121', …
Run Code Online (Sandbox Code Playgroud)

angular angular-calendar

3
推荐指数
2
解决办法
7271
查看次数

Angular - 无法读取未定义的属性'..'

在我的Angular项目中,我收到的错误是"无法读取未定义的'...'的属性",其中"..."是从组合框中选择的任何员工的索引.

关于我的项目的一点背景.我让用户从组合框(tracker.component)中选择一个员工.然后,获取该员工的索引并用于显示该员工的信息(summary.component).它工作得很好,还有下一个,上一个,第一个,最后一个按钮,但每当我打开摘要面板(summary.component)时,我都会在浏览器中看到上面提到的错误.我搞砸了哪里?

这是我的tracker.component.ts

import { Component, OnInit, Input} from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PTODataService } from './pto-data.service';
import { PTOData } from './pto-data';
import { EmpInfoService } from './emp-info.service';
import { EmpInfo } from './emp-info'; 

@Component({
    selector: 'pto-tracker',
    templateUrl: `./tracker.component.html`,
    styleUrls: ['./tracker.component.css']
})

export class TrackerComponent implements OnInit{
    empInfo: EmpInfo[] = new Array<EmpInfo>();
    ptoData: PTOData[];
    isHidden: boolean = false;
    selectedEmployee: number = 0;

    public selectedType: string = "PTO";

    constructor(
        private empInfoService: EmpInfoService,
        private ptoDataService: …
Run Code Online (Sandbox Code Playgroud)

arrays components angular

1
推荐指数
1
解决办法
1290
查看次数

ngOnChanges跟踪先前值和新值?

在我的有角度的项目中,我试图通过单击下一个/上一个按钮来浏览列表。我有一个复选框,可将显示的小时数从数小时更改为数天。我希望能够在员工之间来回走动,并让价值观正确无误。有人告诉我,可以通过ngOnChanges并跟踪先前和新的值来完成此操作。

这就是我所拥有的,它正在更改新值,但是如何更改以前的值?

 ngOnChanges(changes: { [propName: string]: SimpleChange }) {
    for (let propName in changes) {
        if (propName == "selectedEmployee") {
            if (this.timeVar == "days") {
                this.empInfo[this.selectedEmployee].STDLTD = this.empInfo[this.selectedEmployee].STDLTD * 8;
                this.empInfo[this.selectedEmployee].Uncharged = this.empInfo[this.selectedEmployee].Uncharged * 8;

                this.empInfo[this.selectedEmployee].PTOBase = this.empInfo[this.selectedEmployee].PTOBase * 8;
                this.empInfo[this.selectedEmployee].PTOCarry = this.empInfo[this.selectedEmployee].PTOCarry * 8;
                this.empInfo[this.selectedEmployee].PTOBorrowed = this.empInfo[this.selectedEmployee].PTOBorrowed * 8;
                this.empInfo[this.selectedEmployee].PTOBalance = this.empInfo[this.selectedEmployee].PTOBalance * 8;
                this.empInfo[this.selectedEmployee].PTORequests = this.empInfo[this.selectedEmployee].PTORequests * 8;
                this.empInfo[this.selectedEmployee].PTORemaining = this.empInfo[this.selectedEmployee].PTORemaining * 8;

                this.empInfo[this.selectedEmployee].ETOEarned = this.empInfo[this.selectedEmployee].ETOEarned * 8;
                this.empInfo[this.selectedEmployee].ETORequests = this.empInfo[this.selectedEmployee].ETORequests * 8;
                this.empInfo[this.selectedEmployee].ETORemaining = this.empInfo[this.selectedEmployee].ETORemaining * 8; …
Run Code Online (Sandbox Code Playgroud)

angular

1
推荐指数
1
解决办法
5988
查看次数

Angular - 将 *ngIf 和 *ngFor 用于表中的特定行

我对 Angular 还很陌生,我正在尝试制作一个管道来从我的表格中过滤项目,但我不太确定如何去做。我试图只显示 EmpKey = empInfo[selectedEmployee].EmpKey 的表字段。任何帮助将不胜感激!提前致谢!

这是我的 tracker.component.html

<div class="row">
  <div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}">
    <button class="form-control" style="width:150px;" (click)="toggleSummary()">Open Summary</button>
    <select id="empName" [(ngModel)]="selectedEmployee">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo; let i = index" [ngValue]="i">{{i}} - {{emp.EmpID}}</option>
    </select>
    <select id="PTOtype">
      <option selected="selected" disabled>Type of PTO...</option>
      <option value="PTO">PTO</option>
      <option value="ETO-Earned">ETO - Earned</option>
      <option value="ETO-Used">ETO - Used</option>
      <option value="STDLTD">STD/LTD</option>
      <option value="Uncharged">Uncharged</option>
    </select>
    <button class="form-control" style="width: 150px;" (click)="nextEmployee()">Next</button>
    <button class="form-control" style="width: 150px;" (click)="previousEmployee()">Previous</button>
    <h2 *ngIf="empInfo && empInfo.length …
Run Code Online (Sandbox Code Playgroud)

pipe filter angular

0
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×6

angular-calendar ×2

arrays ×1

checkbox ×1

components ×1

filter ×1

pipe ×1