我的Angular材料项目中有一个简单的选择表单字段:
component.html
<mat-form-field>
<mat-select [(value)]="modeSelect" placeholder="Mode">
<mat-option value="domain">Domain</mat-option>
<mat-option value="exact">Exact</mat-option>
</mat-select>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
当[(value)]="modeSelect"被绑定到modeSelect财产在component.ts文件
我想这样做,所以<mat-option value="domain">Domain</mat-option>在页面加载时默认选择.
ng-selected 不适合我
如何在深层嵌套对象中按特定键查找所有值?
例如,如果我有一个这样的对象:
const myObj = {
id: 1,
children: [
{
id: 2,
children: [
{
id: 3
}
]
},
{
id: 4,
children: [
{
id: 5,
children: [
{
id: 6,
children: [
{
id: 7,
}
]
}
]
}
]
},
]
}
Run Code Online (Sandbox Code Playgroud)
我将如何通过id.
注意:children是一个一致的名称,并且id's 不会存在于children对象之外。
所以从 obj 中,我想生成一个这样的数组:
const idArray = [1, 2, 3, 4, 5, 6, 7]
Run Code Online (Sandbox Code Playgroud) 您好,我的变量未定义存在问题。我确定这是因为可观察的匆忙还没有完成。这是导致问题的我的.ts文件中的代码部分:(如果需要提供更多代码和上下文,我会放置理解该问题所需的最少代码。请myFunction从html中的click事件。)
export class myClass {
myVariable: any;
myFunction() {
this.myService.getApi().subscribe(data => {
this.myVariable = data;
});
console.log(myVariable) --> undefined
}
}
Run Code Online (Sandbox Code Playgroud)
因此,这段代码在我的服务中调用了一个函数,该函数从api返回一些数据。问题是,当我尝试myVariable在订阅函数外部访问变量时,它返回未定义的值。我确定这是因为在我尝试访问之前订阅尚未完成myVariable
在尝试访问之前,有没有办法等待订阅完成myVariable?
谢谢!
您好我正在开发一个大型应用程序,我遇到了一些变更检测问题.我将尝试尽可能地解释我的设置.
父组件ts:
运用 changeDetection: ChangeDetectionStrategy.OnPush
我有一个可观察的变量
loaderOverlay$: Observable<boolean>;
this.loaderOverlay$ = this.store.pipe(
select(selectors.loaderOverlaySelector)
);
Run Code Online (Sandbox Code Playgroud)
此变量从子组件的rxjs操作更新.然后通过rxjs进程.(动作 - >减速器 - >选择器)
父组件HTML
<div *ngif="(loaderOverlay$ | async)"></div>
孩子#1组件(我发送我的动作):
myFunction() {
this.store.dispatch(new actions.LoaderOverlay(true));
}
Run Code Online (Sandbox Code Playgroud)
我的问题是,一旦我发出动作,*ngif就会非常不稳定.它似乎没有按照我想要的方式工作(调度操作,将值更改为true以便显示div).这很奇怪,因为如果我console.log(action.payload)在reducer中,该值实际上正在更新,但*ngif它不起作用.甚至更奇怪的是,当我将鼠标悬停在其他组件上时,它似乎开始了.
我花了很多时间在这上面,我想我已经缩小了它以改变检测,因为在父组件中如果我这样做:
ngAfterViewChecked(){
this.changeDetector.detectChanges();
}
Run Code Online (Sandbox Code Playgroud)
它似乎对我有用.我的问题是,ngAfterViewChecked似乎被触发了很多次,我害怕性能问题.
以前有没有人遇到过这个问题?或者有没有人对于发生了什么以及我可以做些什么来解决这个奇怪的问题?
谢谢!
我试图将一个伪:after元素定位在菜单列表项右侧30像素.
无论项目文本的长度如何,我都希望元素向右移动30px.
我已将以下代码剥离到我认为此问题所需的最低限度.
请注意,这是一个移动菜单.菜单和a标签链接扩展了浏览器(手机)的整个宽度.
#menu-main-menu-1 li {
position: relative;
list-style: none;
}
#menu-main-menu-1 li a {
padding: 18px 0;
display: block;
text-align: center;
}
#menu-main-menu-1 a:after {
content: "\25CF";
position: absolute;
right: 0;
left: 150px;
top: 20px;
}Run Code Online (Sandbox Code Playgroud)
<ul id="menu-main-menu-1">
<li class="menu-item">
<a href="#">Menu Item</a>
</li>
<li class="menu-item">
<a href="#">Long Menu Item Text</a>
</li>
</ul>Run Code Online (Sandbox Code Playgroud)
上面的代码产生以下结果:
正如您所看到的,我需要将其放置在左侧150px处,以使元素在项目的右侧移动30px.它可以工作,但我可以预见一个问题,如果菜单项有很多文本,它将超过150px,元素将在文本中.例如:
无论长度如何,我都需要元素在文本的右边30px.所以它看起来像:
这是JSFiddle链接: JSFiddle
请注意,我已经删除了许多不影响此问题功能的不必要的样式(颜色,字体等)
任何帮助将非常感激!
谢谢
我正在创建一个动态组件,并ngAfterViewInit完成了以下代码:
setTimeout(() => {
this.input.nativeElement.focus();
}, 0);
Run Code Online (Sandbox Code Playgroud)
这是有效的:它正确地将焦点设置在输入上,但光标放置在值的开头。我想将光标放在值的末尾。
我试过这个:
setTimeout(() => {
this.input.nativeElement.focus();
let start = this.input.nativeElement.selectionStart;
let end = this.input.nativeElement.selectionEnd;
this.input.nativeElement.setSelectionRange(start,end);
}, 0);
Run Code Online (Sandbox Code Playgroud)
我也尝试过清除该值并重置它,但无法让它工作。
这是 html 以及我如何访问它:
<input class="nav-editor__input" #input type="text">
@ViewChild('input') input: ElementRef;
Run Code Online (Sandbox Code Playgroud)
有任何想法吗?
您好,我在将 css 过渡和动画组合在一起时遇到问题。动画正在工作,但由于某种原因,当我添加过渡时,过渡有效,但取消了动画。有人知道如何将它们结合起来吗?
这是我的CSS:
.circle-spin {
transition: all 1s ease;
}
.circle-spin-reverse {
transition: all 1s ease;
}
.success li:hover .circle-spin-reverse {
animation:spin-reverse 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
.success li:hover .circle-spin {
animation:spin 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } } …Run Code Online (Sandbox Code Playgroud) 我需要使用CSS为某些文本添加"外部发光"Photoshop效果.这是我试图实现的模型的屏幕截图:
这是Photoshop图层设置:
我很确定这是,text-shadow但我一直在搞乱它,我无法在各方面发光.
您好,假设我有以下 ajax 调用:
jQuery.ajax({
type: "GET",
url: "https://myurl.com",
success: function(data)
{
console.log(data);
}
});
Run Code Online (Sandbox Code Playgroud)
这导致以下 json 数据(在我的控制台中)
{
"meta": {
"last_updated": "2017-07-06"
},
"results": [
{
"term": "DRUG INEFFECTIVE",
"count": 1569
},
{
"term": "NAUSEA",
"count": 1374
},
{
"term": "FATIGUE",
"count": 1371
}
]
}
Run Code Online (Sandbox Code Playgroud)
如何div在我的 HTML 页面中以如下格式使用此数据填充 a :
term: x
count: xx
term: x
count: xx
term: x
count: xx
Run Code Online (Sandbox Code Playgroud)
我对“元”的东西不感兴趣,只对“结果”感兴趣
有人知道如何使用简单的循环来显示这些数据吗?
谢谢!
我已经成功编写了一个递归函数来循环嵌套对象并查找结果。但如果它的孩子通过了测试,我很难添加整个父级。我有以下代码:
const myObj = [
{
name: '1',
pages: [
{
name: '1.1',
pages: []
},
{
name: '1.2',
pages: []
},
]
},
{
name: '2',
pages: []
},
{
name: '3',
pages: []
}
]
function searchPages(searchQuery, obj) {
let searchResults = [];
for (let i = 0; i < obj.length; i++) {
let item = searchString(obj[i], searchQuery);
if (item) {
searchResults.push(item);
}
}
return searchResults;
}
function searchString(obj, string) {
if (obj.name.includes(string)) {
return obj;
}
for …Run Code Online (Sandbox Code Playgroud)angular ×4
css ×3
html ×3
javascript ×2
ajax ×1
animation ×1
arrays ×1
css-position ×1
css3 ×1
ecmascript-6 ×1
flexbox ×1
function ×1
jquery ×1
json ×1
ngrx-store ×1
object ×1
observable ×1
subscribe ×1
typescript ×1