小编Gab*_*iel的帖子

如何在AngularJS HTML模板中存储变量?

我如何将值存储到变量中,例如在单击角时?我有以下代码无法将值保存到变量中:

HTML:

<div ng-app='app'>
    <a ng-controller="MyController" href="#" ng-click="variable = 1">

    </a>
    {{variable}}
</div>
Run Code Online (Sandbox Code Playgroud)

控制器:

var app = angular.module('app',[]);

app.controller('MyController', function($scope)
{
});
Run Code Online (Sandbox Code Playgroud)

jsfiddle代码

angularjs

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

未定义传递给数组

我有这个测验应用程序的代码.问题是,以某种方式undefined传递给数组choices.

'use strict';

var quiz,
  actualQuestion = 1,
  getChoices,
  generateHtml,
  html = '',
  choices = [];

quiz = [{
  question: "Who is Prime Minister of the United Kingdom?",
  choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
  correctAnswer: 0
}, {
  question: "Who is Prime Minister of the United Kingdom2?",
  choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
  correctAnswer: 0
}];

getChoices = function() {
  for (var i = 0; i < quiz[actualQuestion].choices.length; i++) { …
Run Code Online (Sandbox Code Playgroud)

javascript arrays

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

从类中调用组件的方法

我的应用程序中有一个物料2 sidenav组件。如何从类中访问组件方法?就我而言,我想调用该open()方法。在模板中可以<button md-button (click)="sidenav.open()">很好地工作,但是如果我在类via中使用方法this.el.nativeElement.open();,则会抛出:

错误TypeError:无法读取未定义的属性“打开”

我的组件:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-sidebar-content',
  template: `
    <md-sidenav-container class="example-container">

      <md-sidenav #sidenav class="example-sidenav">
        Jolly good!
      </md-sidenav>

      <div class="example-sidenav-content">
        <button md-button (click)="sidenav.open()">
          Open sidenav
        </button>
      </div>

    </md-sidenav-container>
  `,
  styleUrls: ['./sidebar-content.component.css']
})
export class SidebarContentComponent implements OnInit {

  @ViewChild('sidenav') el: ElementRef;

  constructor() { }

  ngOnInit() {

  }

  openSideNav() {
    // this.el.nativeElement.open();
    // ERROR TypeError: Cannot read property 'open' of undefined
  }

}
Run Code Online (Sandbox Code Playgroud)

angular-material angular

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

以角度形式保留 http 调用的顺序

我正在尝试使用我在此处找到的几种方法来解决我面临的订单问题,没有成功。

我有一个方法,可以为传单层数组加载一些数据:

private loadSelectedTileLayersCapabilities(): void {

        let tempTileLayer;

        this.selectedTileLayerIds.forEach(
            (selectedTileLayer: string) => {
                tempTileLayer = this.getTileLayerById(selectedTileLayer);

                this.capabilitiesService.getTileLayerDimensions(tempTileLayer.url, tempTileLayer.name, tempTileLayer.id)
                .subscribe(
                    dimensions => this.displayNewTileLayer(dimensions)
                );
            }
        );
    }
Run Code Online (Sandbox Code Playgroud)

然后我有一个方法,调用http发生在其中:

public getTileLayerDimensions(urlToFormat: string, tileLayerName: string, tileLayerId: string): Observable<Dimensions> {

        const capabilitiesUrl = `serviceUrl`;

        return this.httpClient.get(capabilitiesUrl, {responseType: "text"})
            .map(res => {

                // Doing stuff with data

                return dataForLayer;
            });

    }
Run Code Online (Sandbox Code Playgroud)

问题是,该displayNewTileLayer(dimensions)方法是按随机顺序调用的。有没有办法保留数组中项目的存储顺序 selectedTileLayerIds

rxjs angular angular-httpclient

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

动画容器

我正在开发一个更大的应用程序,我们对模块使用延迟加载。在我们加载一个模块之后,在某些情况下,一个组件会被渲染为<ng-container><ng-container>. 问题是,在容器上定义的动画没有被调用。

我创建了一个虚拟的 stackblitz 示例来演示我的意思:链接

app.component.html:

<ng-container *ngIf="visible" [@myAnimation]>
    <hello [ngStyle]="{'top': '50px'}" name="not animated"></hello>
</ng-container>

<hello name="animated" [ngStyle]="{'top': '100px'}" *ngIf="visible" [@myAnimation]></hello>

<button (click)="toggle()">Toggle visibility</button>
Run Code Online (Sandbox Code Playgroud)

app.component.ts:

import { Component } from '@angular/core';
import {animate, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("myAnimation", [
            transition(":enter", [
                style({opacity: 0 }),
                animate(
                    "800ms",
                    style({
                        opacity: 1
                    })
                ),
            ]),
            transition(":leave", [
                style({opacity: 1 }),
                animate(
                    "800ms",
                    style({
                        opacity: 0
                    })
                ),
            ]), …
Run Code Online (Sandbox Code Playgroud)

angular angular-animations

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

@Input() 中的相同布尔值不会触发更改检测

我有一个角度应用程序,其中有一个弹出组件。我可以通过它的父级以及它本身来控制弹出窗口的可见性。

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <popup [visible]="visible"></popup>
  <button (click)="onShow()">Show</button>
  <button (click)="onHide()">Hide</button>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public visible: boolean = false;
  public onShow(): void {
    this.visible = true;
  }
  public onHide(): void {
    this.visible = false;
  }
}

Run Code Online (Sandbox Code Playgroud)

弹出组件.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'popup',
  template: `<div *ngIf="visible">My fancy popup <button (click)="onClick()">Click to close</button></div>`,
})
export class PopupComponent  {
  @Input()
  public visible: boolean; …
Run Code Online (Sandbox Code Playgroud)

angular

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

从数组中删除特定项目会删除 UI 中的错误项目

我为此苦苦挣扎了几天,但无法弄清楚。我有一个简单的小部件,我想在其中动态添加和删除输入(对于组/代表)。问题是,如果我删除第一个项目,那么最后一个项目就会从 UI 中删除。

我为应用程序创建了一个 dartpad:dartpad

我的 main.dart:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SetBuilderWidget();
  }
}

class TempSet {
  int weight;
  int rep;
  int order;

  TempSet(this.order, this.weight, this.rep);
}

class SetBuilderWidget …
Run Code Online (Sandbox Code Playgroud)

dart flutter

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

Firebase 查询函数返回未定义

我想编写一个返回对象的查询函数。问题是,在我的情况下,函数返回undefined.

var filterDataAccordingToDate = function (ref, startTime, endTime) {

    var filteredObj = {};

    ref.orderByChild('date').startAt(startTime).endAt(endTime)
    .once('value', function(snap) {
       filteredObj = snap.val();

       console.log(util.inspect(filterDataAccordingToDate(filteredObj, false, null));
      //Returns the correct object

       return filteredObj;
    });  
}

console.log("DATA RETURNED: " + util.inspect(filterDataAccordingToDate(travelRef, 1466439004, 1466439011), false, null));
// DATA RETURNED: undefined
Run Code Online (Sandbox Code Playgroud)

javascript firebase firebase-realtime-database

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

选择子标签:元素之后,最后一个除外

我有一个有角度的应用程序,在其中有自定义组件(标签)div

<div class="parent">
    <custom-1></custom-1>
    <custom-2></custom-2>
    <custom-3></custom-3>
    <custom-4></custom-4>
</div>
Run Code Online (Sandbox Code Playgroud)

我想选择所有子标签的:after内部.parent,因此我可以在组件之间创建分隔线,除了最后一个之后。

目前,我只选择了所有:

.parent > *:after {
    content: "";
    height: 60%;
    width: 1px;
    background-color: black;
    position: absolute;
    right: 0;
    top: 5px;
}
Run Code Online (Sandbox Code Playgroud)

看来,这*是在忽略:last-of-type,因为如果我这样使用它:.parent > *:last-of-type:after,它什么也不会选择。

css

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