小编Lah*_*oda的帖子

我ion-spinner在离子应用程序中使用。但我的情况是我想改变微调器的大小。当我使用带有默认微调器调整大小的自定义 css 时效果很好。但是对于气泡、圆圈、圆点旋转器，它无法正常工作。
CSS

.spinner-large {
  width: 100px;
  height: 100px;
}

HTML

    <ion-spinner name="dots" class="spinner-large"></ion-spinner>

我怎样才能解决这个问题。

Stackblitz 示例

我想在更改模型对象后设置光标位置，但它实际上尝试在更新文本框的值之前设置光标位置。

HTML：

    <input type="text" name="test" id="test" [(ngModel)]="myString">
    <button type="button" (click)="updateText('testStr')">

TS：

    myTextBox: HTMLInputElement;

    ngOnInit() {
    this.myTextBox = document.getElementById('test');
    }

    updateText(str:String){
    this.myString+=str;
    this.myTextBox.focus();
    this.myTextBox.setSelectionRange(2,2);
    }

这样，因为它尝试在实际更新文本之前设置光标位置，所以它只能focus(). 但是，如果我没有将任何内容绑定到文本框并通过执行this.myTextBox.setAttribute('value',str);然后focus()调用它来更新其文本，setSelectionRange那么它就可以工作。我应该怎么办？

我创建了一个简单的自定义MultiValueField，MultiWidget目的是输入出生日期，但允许单独输入日、月和年。理由是该应用程序用于输入历史数据，因此这些字段中的一个或多个可能是未知的。在面向用户的站点上还有一个显示“未知”的复选框。

我发现一切正常，除了当我在管理站点中保存一个对象的实例并创建一个新实例时，空白的管理表单显示上一个条目的日期值：

对于新条目，所有这些字段都应为空白。

看起来该字段没有正确重新初始化，但我不确定应该在哪里进行。我通过在表单中​​检查是否重新初始化字段来添加了一个解决方法，但我觉得这应该在自定义字段/小部件中完成。

示例代码：

    class CustomDateWidget(forms.MultiWidget):
        """Custom MultiWidget to allow saving different date values."""
        template_name = 'myapp/widgets/custom_date_widget.html'

        def __init__(self, attrs=None):
            _widgets = (forms.NumberInput(attrs=({'placeholder': 'DD'})),
                        forms.NumberInput(attrs=({'placeholder': 'MM'})),
                        forms.NumberInput(attrs=({'placeholder': 'YYYY'})),
                        forms.CheckboxInput()) 
            super().__init__(_widgets, attrs)

        def decompress(self, value):
            if value:
                return value
            else:
                return '', '', '', False

        def value_from_datadict(self, data, files, name):
            value_list = [
                widget.value_from_datadict(data, files, name + '_%s' % i)
                for i, widget in enumerate(self.widgets)
            ]
            return value_list


    class CustomDateField(forms.MultiValueField):
        """Custom MultiValueField to allow saving different …

尝试使用 npm 安装任何节点包会挂起大约 5 分钟，然后出现 ECONNRESET 网络错误。我最近一直在其他项目中使用 npm，它运行良好，但现在不适用于任何项目（包括干净的 npm init）

npm i ws

这是在我的家庭网络上运行的 Raspberry pi 3 上，没有代理要求。linux 和 windows 的所有其他机器都工作正常。

npm -v = 6.4.1

我尝试了以下方法：

1. npm i ws 这给了我 ECONNRESET 错误（见下文）

2. Curl https://registry.npmjs.org/ &Curl https://registry.npmjs.org/ws 都返回正确的 json 响应

3. 删除任何代理设置

    npm config rm proxy
    npm config rm https-proxy
    npm config set registry http://registry.npmjs.org/

4. 重启等

完整的错误日志：

npm i ws --save --verbose
npm info it worked if it ends with ok
npm verb cli [ '/home/pi/.nvm/versions/node/v8.16.0/bin/node',
npm verb cli   '/home/pi/.nvm/versions/node/v8.16.0/bin/npm',
npm …

将用户输入添加到设置宽度的输入形式时，下划线会超出输入范围。

给出以下代码：

    <ion-list lines="none">
      <ion-item>
         <ion-label color="medium" position="floating">Username</ion-label>
         <ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
              </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
              >
                <span padding>Valid email is required</span>
            </ion-text>
            <ion-item>
              <ion-label color="medium" position="floating">Password</ion-label>
              <ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
            </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
              >
                <span padding translate>Password is required</span>
            </ion-text>
            <a href="/login/forgot" class="forgot-password ion-float-right">
                [Forgot Your Password?]
            </a>
         </ion-list>

另外，当我切换到一个字段时，INPUT会覆盖整个离子项目字段，而不是离子输入字段，如下所示：

我已经尝试过对CSS进行各种更改，但均未取得成功。通过检查器，我可以通过将--inset-padding-end变量更改为0来解决此问题，但是我还没有找到如何全局更改/设置该变量的方法？

有没有人知道的快速解决方案？当离子列表设置为“插图”时，此错误看起来特别糟糕，如下所示：

在我的Angular项目中，自定义404页面有一个名为“ wrongRouteComponent”的组件。当有人输入非预定义的路线时，应显示“ wrong-route.component.html”。我不知道该怎么做。

这是我使用过的“ app-rouring.module.ts”。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Required components for which route services to be activated
import { LandingComponent } from '../../components/landing/landing.component';
import { DashboardComponent } from '../../components/dashboard/dashboard.component';
import { UserprofileComponent } from '../../components/userprofile/userprofile.component';
import { WrongRouteComponent } from '../../components/wrong-route/wrong-route.component';

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '404', component: WrongRouteComponent},

]; …

我正在尝试在 Ubuntu 中使用 Vue CLI 创建一个 Vue 项目，但一直出现相同的错误。我已经使用sudo npm i -g @vue/cli.

这是错误消息：

00h00m00s 0/0: : 错误错误: 命令失败: yarn config get registry 错误: [Errno 2] 没有这样的文件或目录: 'config'

错误：命令失败：yarn config get registry

错误：[Errno 2] 没有这样的文件或目录：'config'

at makeError (/usr/local/lib/node_modules/@vue/cli/node_modules/execa/index.js:174:9) at Promise.all.then.arr (/usr/local/lib/node_modules/@vue/ cli/node_modules/execa/index.js:278:16) 在 processTicksAndRejections (internal/process/next_tick.js:81:5)

这是什么原因？

如何在角度4的选择框中获取onchange函数中的optgroup标签值

我有一个表格中的选择框,其中有多个日期作为选项组,时间为24小时格式,分别为1000,1200和1400,分别为10 AM12PM和2PM.

    <select class="form-control" formControlName="arrival_time" (change)="onSlotChange($event)">
        <option value="" data-date="" data-slot="">Select Arrival Time</option>
         <ng-container *ngIf="!availablePrevSlots">
            <optgroup label="{{availablePrevSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availablePrevSlots">
            <optgroup label="{{availablePrevSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availablePrevSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availableSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableNextSlots">
            <optgroup label="{{availableNextSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option> …

我有这两个服务文件，其中一个包含在另一个中。

应用程序服务.ts

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';

    import { throwError, Observable } from 'rxjs';

    import { catchError, map } from 'rxjs/operators';

    import { Router } from '@angular/router';

    import { environment } from '../../environments/environment';

    import { AuthService } from '../_services/auth.service';

    @Injectable({
        providedIn: 'root'
    })
    export class AppService {

        protected _apiURL = environment.apiURL;
        // Define URLs here
        _overviewURL: string;
        _deleteUserUrl: string;

        constructor(private http: HttpClient,
                    private _router: Router,
                    private _authService: AuthService) {
            this.setApiUrl();
        }

        /* …

使用最新版本的 Angular。我正在尝试使用 Angular 材料垫徽章来显示玩家投掷的达阵次数，但只有在镀铬中，当我增加数字时，徽章位置才会发生变化。在 Firefox 中运行时，徽章位置是所需的。

HTML 代码如下：

<p>Touchdowns<span matBadge="{{touchdowns}}" matBadgeOverlap="false"></span></p>
<button (click)="addTouchdown()">Score Touchdown<button>

这是TS代码：

this.touchdowns:number = 0;

addTouchdown(){
    this.touchdowns++;
}

除了来自 Angular 的标准样式之外，没有应用任何样式。

假设我想通过 PrimeNG SplitButton 触发函数 foo 和 bar。两者都有一个关于按钮本身的参数。

关于我想要为分配的功能设置参数的操作。

我可以为 foo 做，因为我是用 onClick 设置的。

但是我怎么能为酒吧做到这一点？

    <p *ngFor="let x of ['aaa','bbb','ccc']">
      <p-splitButton label="FOO for {{x}}" (onClick)="foo (x)" [model]="cmds"></p-splitButton>
    </p>

    cmds : any = [{label: "BAR for x", command: () => { bar (x); }}];   // x is not here, how can I get it?

I have the following requirement that is not working with my current code. I need to hide or show buttons which sit in my app header component based on a users role.

The users role comes from session storage which is being called in a service file.

     setStoreData() {
        const data = JSON.parse(sessionStorage.getItem(`oidc.user:${environment.accessTokenApiUrl}:${environment.clientId}`));
        return data;
      }

I then consume the service in my header component on ngOnit and assign it to a variable

      ngOnInit() {
            this.userRole = this._storeService.setStoreData().profile.role;
      }

Then …