我有一些可通过以下方式访问的数据:
{{ content['term_goes_here'] }}
......并且评估为true或者false.我想根据表达式的真实性添加一个类,如下所示:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
这里true给我的阶级fa-checkbox-marked和假会给我fa-checkbox-blank-outline.我上面写的方式给了我一个错误:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
我该怎么写它才能有条件地确定课程？
npm install由于弹出的错误,我无法运行任何命令.我不确定这意味着什么:
npm ERR! path /Users/.../Projects/.../file:cordova-dist/tools/cordova-common-1.5.1.tgz
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall stat
npm ERR! enoent ENOENT: no such file or directory, stat '/Users/.../Projects/.../file:cordova-dist/tools/cordova-common-1.5.1.tgz'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
我该怎么做来弥补这个错误？
完整跟踪:
这是存储在npm的.log文件夹中的详细跟踪
16 silly install generateActionsToTake
17 silly diffTrees action count 5
18 silly diffTrees update cordova-common@file:file:cordova-dist/tools/cordova-common-1.5.1.tgz
19 silly diffTrees remove angular2-google-maps@0.17.0
20 silly diffTrees remove cordova 2
21 silly diffTrees …我正在尝试在新的 Angular 7 / Ionic 4 应用程序中使用 Testbed 但无法运行任何测试，因为我的组件依赖于 Ionic 本机插件storage。
app.component.spec.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
import {Router} from '@angular/router';
import {Location} from '@angular/common'
import { LoginPage } from './pages/login/login.page';
import { routes } from "./app-routing.module";
import {HttpClientTestingModule} from '@angular/common/http/testing';
import …离子似乎正在添加一个<div class='fixed-content'>和<div class='scroll-content'>我的观点,它创造了双倍的利润.它似乎只是添加了很多内容,我假设我可以控制它,我只是不知道如何.
为什么会这样？
我的HTML:
<ion-content>
<ion-grid>
<ion-row>
<ion-col >
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
渲染内容:
<ion-content class="content content-md">
<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid"> …我有一个非常简单的应用程序:
<div id="show_vue">
<page-change page="bio" @click="changeThePage"></page-change>
<page-change page="health" @click="changeThePage"></page-change>
<page-change page="finance" @click="changeThePage"></page-change>
<page-change page="images" @click="changeThePage"></page-change>
</div>
Vue.component("page-change", {
template: "<button class='btn btn-success'>Button</button>",
props: ["page"]
})
var clients = new Vue({
el: '#show_vue',
data: {
currentRoute: window.location.href
},
methods: {
changeThePage: function() {
console.log("this is working")
}
}
})
...但是当我单击<page-change></page-change>按钮时,没有任何内容记录到控制台.我知道我错过了一些简单的东西,但我没有收到任何错误.
如何点击我的点击 changeThePage
我有一个简单的输入,用于电话号码,我想验证只有数字,长度是10位数.
<input [(ngModel)]="client.phone" class="form-input" name="phone" type="phone" [value]="client.phone">
如果不使用,我该怎么做才能验证FormBuilder？这似乎FormBuilder只是使事情复杂化,我只想验证这一个输入.
我正在尝试创建一个显示客户列表的视图,我遇到了一个问题,因为它是一个对象,而且是因为Ionic的html类型.
这是我的对象:
x = { Consultation: [{name: "Joe Smith}, {name: "Jane Doe"}],
Re-evaluation: [{name: "Joe Smith2}, {name: "Jane Doe2"}],
Meeting: [{name: "Joe Smith3}, {name: "Jane Doe3"}],
Testing: [{name: "Joe Smith4}, {name: "Jane Doe4"}]
}
我定义appointment_types为Object.keys(x)aka ["Consultation", "Re-evaluation", "Meeting", "Testing"].
在我看来:
<ion-list>
<ion-list-header *ngFor="let type of appointment_types">{{ type }}</ion-list-header>
<!-- type is no longer defined after ion-list-header closes -->
<ion-item-sliding class="shaded-slider" *ngFor="let client of appointment_types[type]">
<ion-item>{{ client.name }}</ion-item>
</ion-item-sliding>
</ion-list>
我有什么办法可以留在appointment_types循环中吗？
我知道flexbox为居中项提供了一个很好的解决方案。但是，当我有3个项目并且无论其他2个项目的大小如何，我都希望中心（第二个）项目相对于窗口居中时，我遇到了一个问题。
在我的笔中，您可以看到第二个项目“客户索引”偏离中心，因为右侧的内容大于左侧的内容。 我如何强迫它居中？
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}<div class="flex">
<span style="font-size:12px;">small</span>
<span style="font-size:20px;">Client Index</span>
<span style="font-size:18px;">Lots of content that moves the center</span>
</div>我对可观察到的新手很担心内存泄漏.如果我创建以下内容:
private client = new BehaviorSubject("");
clientStream$ = this.client.asObservable();
和susbscirbe在他们看来像这样:
this.clientService.clientStream$.subscribe(
client => {
this.client = client;
}
}
我需要取消订阅吗？如果我打电话client.getValue()怎么办？
我有一个简单的问题，您在哪里声明rem计算的基础尺寸？
<body>
<h1>Something</h1>
</body>
我可以看到，font-size被<body>设置为16像素和<h1>设置为3rem，但字体是在30像素渲染时，我期望48像素。父母可以重新定义基础吗？