我如何将值存储到变量中,例如在单击角时?我有以下代码无法将值保存到变量中:
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)
我有这个测验应用程序的代码.问题是,以某种方式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)我的应用程序中有一个物料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) 我正在尝试使用我在此处找到的几种方法来解决我面临的订单问题,但没有成功。
我有一个方法,可以为传单层数组加载一些数据:
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?
我正在开发一个更大的应用程序,我们对模块使用延迟加载。在我们加载一个模块之后,在某些情况下,一个组件会被渲染为<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) 我有一个角度应用程序,其中有一个弹出组件。我可以通过它的父级以及它本身来控制弹出窗口的可见性。
应用程序组件.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) 我为此苦苦挣扎了几天,但无法弄清楚。我有一个简单的小部件,我想在其中动态添加和删除输入(对于组/代表)。问题是,如果我删除第一个项目,那么最后一个项目就会从 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) 我想编写一个返回对象的查询函数。问题是,在我的情况下,函数返回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) 我有一个有角度的应用程序,在其中有自定义组件(标签)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,它什么也不会选择。