小编Noa*_*Noa的帖子

在angular2中禁用select

我正在写angular2应用程序.我需要所有按钮并选择禁用,然后我需要启用它们.我想通过使用我的类字段但禁用但没有运气来做到这一点.我有这个代码:

 @Component({
  selector: 'my-app',
  template:`
    <h1>Disable Enable</h1>
    <h2> this is a disabled select </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" disabled>
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>
     <h2> this is a disabled button </h2>
    <button type="button" class="btn btn-default {{butDisabled}}">Disabled</button>

    <h2> Why can't I disable the select the same way? </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" class="{{butDisabled}}">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>


  `,
})
export class AppComponent {
  butDisabled = "disabled";
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, …
Run Code Online (Sandbox Code Playgroud)

drop-down-menu twitter-bootstrap-3 angular

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

带有滚动功能的priming涡轮增压塔自动调整大小

我正在使用涡轮表,并需要以下内容:

  • 让所有列根据内容自动调整大小。
  • 让表格本身水平填满屏幕,例如不要手动指定宽度
  • 当自动调整大小的列需要的空间超出表宽度不能提供的空间时,不必手动指定任何列宽,以及在使用列切换添加新列时,使表水平滚动。

从turbotable示例中,我得到:

<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px" 
[style]="{'width':'100%'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:250px">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>
Run Code Online (Sandbox Code Playgroud)

但我不想使用

<col *ngFor="let col of columns" style="width:250px">
Run Code Online (Sandbox Code Playgroud)

这是一个plnkr

primeng angular primeng-turbotable

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

angular2图表和事件

我在angular2应用程序中使用zingchart并且遇到了这个问题.我的图表数据已经改变,我需要重新渲染图表,我只是不知道该怎么做?这是zing chart团队提供的rerender按钮的傻瓜.我不知道如何重新渲染图表. https://plnkr.co/edit/OjqvVPiyKBUJbKgcLi6A?p=preview

  import {bootstrap} from 'angular2/platform/browser';
import {Component, NgZone, AfterView, OnDestroy} from 'angular2/core'

class Chart { 
  id: String;
  data: Object;
  height: any;
  width: any;
  constructor(config: Object) {
    this.id = config['id'];
    this.data = config['data'];
    this.height = config['height'] || 300;
    this.width = config['width'] || 600;
  }
}

@Component({
  selector : 'zingchart',
  inputs : ['chart'], 
  template : `
   <div id='{{chart.id}}'></div>
  `
})
class ZingChart implements AfterView, OnDestroy {
  chart : Chart;
  constructor(private zone:NgZone) {
  }

  ngAfterViewInit() {
      this.zone.runOutsideAngular(() => {
          zingchart.render({
              id …
Run Code Online (Sandbox Code Playgroud)

events charts zingchart angular

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