小编br.*_*ien的帖子

将参数传递给AngularJS $ timeout

我正在开发一个离子移动应用程序,我需要将参数传递给$ timeout promise,这样我就可以使用该参数进行一些操作.我阅读了有关$ timeout(https://docs.angularjs.org/api/ng/service/ $ timeout)的angularjs文档,它说最后一个参数可以是传递给超时函数的参数.我试过这个:

$timeout(function(params){
    alert(params.p1 + " - " + params.p2);
}, 5000, true, {p1 : "Hello", p2 : "World"});
Run Code Online (Sandbox Code Playgroud)

但它不起作用,我无法访问超时函数内的params变量.

难道我做错了什么?或者,还有另一种方法吗?

谢谢

javascript angularjs ionic-framework

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

Angular 5%管道digitInfo无法按预期工作

如果我在Angular 5模板中执行此操作:

{{0.7 | percent:'1.2-5'}}
Run Code Online (Sandbox Code Playgroud)

我按预期得到了这个: 70.00%

但是,当我这样做时:

{{0.07 | percent:'1.2-5'}}
Run Code Online (Sandbox Code Playgroud)

我得到的7.00000%不是预期的7.00%

我只是做错了什么或者这是Angular中的一个错误?

angular-pipe angular

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

Angular 2中的ngStyle和ngClass

我不确定如何使用ngStyle最新的beta-12指令.请有人澄清一下.

在角文档的链接plnkr https://angular.io/docs/js/latest/api/common/NgStyle-directive.html是过时的,因为他用alpha版本.

我尝试了这些语法,但似乎没有用.一世

 [ngStyle]="{'display': none}"
 [style.display]="none"
Run Code Online (Sandbox Code Playgroud)

http://plnkr.co/edit/U9EJuIhFqxY9t2sULMdw

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngStyle]="{'display': none}">Hello {{name}}</h2>
      <h2 [style.display]="none">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}
Run Code Online (Sandbox Code Playgroud)

angular2-directives angular

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

在Angular 4中对图像交换进行动画处理(在AngularJS中为ng-animate-swap交换)

我想在angular 4应用中为图像交换设置动画。当控制器替换img src属性时,旧图像应消失并出现新图像。

在AngularJS中,可以通过使用ng-animate-swap更改不透明度来实现。但是,Angular 4似乎不支持动画交换。没有交换触发器如何实现?

我尝试为src属性添加从void到*的过渡,然后又添加回来,但这并没有按预期工作。第一个图像是有动画的,后来交换是在没有动画的情况下发生的。

@Component({
  selector: 'app-play-card',
  template: '<div (click)="loadImg()"><img [@fade]="imgsrc" src="{{ imgsrc }}" /></div>',
  styleUrls: ['./play-card.component.css'],
  animations: [
    trigger('fade', [
      transition('void => *', [
        style({opacity: 0.1}),
        animate(5000, style({opacity: 1}))
      ]),
      transition('* => void', [
        style({opacity: 0.9}),
        animate(5000, style({opacity: 0}))
      ])
    ])
  ]
})
Run Code Online (Sandbox Code Playgroud)

css animation web-animations angular angular-animations

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

带有输入文件的Angular 4/5材料凸起按钮

我正在开发一个角度应用程序,目前正在上传我正在使用的文件:

<label class="btn btn-default">
    <input type="file" (change)="selectFile($event)">
</label>
<button class="btn btn-success" [disabled]="!selectedFiles"
    (click)="upload()">Upload</button>
Run Code Online (Sandbox Code Playgroud)

使用我的.ts文件中的方法,它运行良好.

我想将此升级为物质角度组件凸起按钮,就像现在一样:

<button mat-raised-button>
    <input type="file" (change)="selectFile($event)">
</button>

<button mat-button disabled [disabled]="!selectedFiles" (click)="upload()">Upload</button>
Run Code Online (Sandbox Code Playgroud)

禁用按钮运行良好,但输入文件部分不起作用,打印错误,不打开文件夹搜索窗口.有任何想法吗?

html material angular-material angular

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

JPA 用户、角色、多对多休眠关系

我正在使用 JPA+Hibernate+SpringBoot+PostgreSQL 来创建不同实体之间的关系,但是我收到了大量错误,包括看起来像 SQL 错误的错误,但应用程序还是启动了。我是否正确编码了 manyToMany 关系?可以有很多用户,每个用户可以有多个角色。也许单对多更好?

我正在使用“spring-boot-starter-data-jpa”

这些是我迄今为止唯一的休眠文件。

角色.java

@Entity(name = "role")
public class Role implements java.io.Serializable {
    /**
     * 
     */
    private static final long serialVersionUID = -5525359165179861924L;
    @Id
    @GeneratedValue(strategy=GenerationType.AUTO)
    @Column(name = "id")
    int id;

    private String role;

    @ManyToMany(mappedBy = "roles",fetch = FetchType.LAZY)
    private Set<User> users;


    public Role(String role) {
        super();
        this.role = role;
    }

    public void setId(int id){
        this.id = id;
    }

    public int getId(){
        return id;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String …
Run Code Online (Sandbox Code Playgroud)

java spring hibernate jpa

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

用变量Angular 4进行动画处理

我正在@angular/animations: 4.4.6尝试为将显示大量文本的组件设置展开/折叠动画。默认情况下,它将显示一定数量的文本,但是不同的父组件可以定义不同的折叠高度。
据我所知,我做的一切正确。但是animations装饰器将忽略输入,而直接使用默认值。

import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style({
        height: '{{min_height}}',
      }), {params: {min_height: '4.125em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})
export class LongTextComponent implements OnInit {

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() {

   }

  ngOnInit() {
  }

  expandText(){
    this.longTextState = this.longTextState === 'expanded' ? …
Run Code Online (Sandbox Code Playgroud)

html css animation angular angular-animations

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

由于 ngIf 保持对组件的引用隐藏

我有一个问题 div,它使用 ngFor 生成一些子组件。这些子组件具有用于数据的输入字段。当用户在这些字段中输入数据并单击下一个按钮时,问题 div 会被 ngIf 隐藏并显示预览 div。当再次按下后退按钮时,预览 div 会与 ngIf 一起隐藏并出现问题 div。但是因为问题 div 中的子组件再次创建,所以输入字段中的数据消失了。以下是我的html

<!-- questions

     div-->
    <div class="questions activity_screen" *ngIf="showquestions">
                <div *ngFor="let component of components;let i=index">
                    <app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost>
                </div>
                <a class="submit_button" (click)="getdata()">Submit</a>
            </div>
        <!-- preview div-->
            <div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf">
                <button (click)="goback()">go back</button>
            </div>
Run Code Online (Sandbox Code Playgroud)

如何保持这些组件的先前状态,以便在按下后退按钮后再次出现问题 div 后数据不会丢失!

angular2-forms angular2-directives angular2-template angular

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

Angular 5 - 如何重定向到具有特定标题的外部 url?

这就是我试图用 Angular 实现的目标:

this.headers = ...;

this.http.get(`${urlApi}`).subscribe(data => {
    // go to url with specific headers
}, err => {
    console.log(err);
});
Run Code Online (Sandbox Code Playgroud)

当我从我的服务器得到一个 get 请求的响应时,我想重定向到一个带有特定标头的外部 url,以便能够在两个应用程序之间传递一些信息。

必须有办法做到这一点。我知道不可能使用window.location.href.

javascript http-headers typescript angular

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

禁用Ng在Angular 2中不起作用

我在component.html中有这个应该根据我的component.ts中的值启用和禁用,即“ disabledInput”

home.component.html

<div class="input-field">
  <input [attr.disabled]="disabledInput" value="{{userClaims.UserId}}" type="text" class="validate">
</div>
Run Code Online (Sandbox Code Playgroud)

这是'disabledInput'的值是 home.component.ts的地方

disabledInput: boolean = true;
Run Code Online (Sandbox Code Playgroud)

为什么即使将disabledInput更改为false或true,输入字段仍保持禁用状态?在开发控制台中,我可以看到“ disbaled = false”或“ disabled = true”,但输入字段不会更改状态。谢谢。

angular

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