我有一个简单的场景,但只是无法让它工作!
在我看来,我在一个高度有限的盒子里显示一些文字.
正在从服务器获取文本,因此视图会在文本进入时更新.
现在我有一个"扩大"按钮,有一个ngIf是要显示的按钮,如果在框中的文本溢出.
问题在于,因为文本在获取时会发生变化,所以"扩展"按钮的条件会true在Angular的变化检测结束后变为...
所以我得到了这个错误:表达式在检查后发生了变化.上一个值:'false'.当前值:'true'.
显然按钮没有显示......
看到这个Plunker(检查控制台以查看错误...)
知道如何使这项工作?
我正在构建一个React Native项目,它的设计很大程度上依赖于阴影.
不幸的是,Android没有阴影的本机支持,并且设置elevation属性不符合我的需求.
我正在拼命寻找解决方案:
我已经尝试过react-native-shadow- 但它会严重影响性能.
我发现这个本机安卓库的阴影看起来很棒,但我没有把它与我可以在我的项目中使用的React Native UI组件放在一起的知识.
任何帮助将不胜感激!
我构建了一个Module拥有自己的服务和组件的 Angular :
@NgModule({
declarations: [ FileUploader],
exports: [ FileUploader ],
imports: [ CommonModule ],
providers: [ FileService ],
})
export class FilesModule { }
Run Code Online (Sandbox Code Playgroud)
和FileService:
import { Injectable } from '@angular/core';
@Injectable()
export class FileService
{
constructor() {}
uploadFile(file): Promise {
return new Promise((resolve, reject) => {
...
}
}
}
Run Code Online (Sandbox Code Playgroud)
然后我将它导入到我的AppModule:
@NgModule({
declarations: [ AppComponent ],
entryComponents: [ AppComponent ],
imports: [ FilesModule ]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)
当我注入FileService …
我正在建立一个基于om的表格,子章节可以被视为折叠或扩展.视图状态保存在子部分本地状态中:
(defn subsection-view [subsection owner]
(reify
om/IInitState
(init-state [this]
{:collapsed true}))
问题是每个子部分视图状态可以通过折叠 - 展开 - 全部按钮或通过为每个子部分显示的单独按钮双向实现.
为了处理expand-compress-all,以局部状态的形式保存了全局崩溃状态:
(defn form-view [data owner]
(reify
om/IInitState
(init-state [this]
{:all-collapsed true})))
显然,on-click通过更新本地状态下的折叠状态来处理两个按钮事件.
(om/update-state! owner :collapsed not)
我的问题是我应该如何知道最后更新了哪个状态才能显示正确的视图?
或者在哪里可以保存可能从组件树的不同级别中的不同触发器实现的崩溃状态的正确位置(本地状态或应用程序状态)?
我最近向私有 npm 模块添加了类型。
该模块的导出类型之一是以下枚举:
export enum ServerResponseCode {
LoginFailed: 'loginFailed',
LoginExpired: 'loginExpired'
}
Run Code Online (Sandbox Code Playgroud)
然后它被另一个 typescript 项目导入并使用如下:
import { ServerResponseCode } from 'private-module'
if(response.code === ServerResponseCode.LoginExpired)
Run Code Online (Sandbox Code Playgroud)
此代码不会引发任何编译错误,但在运行时我收到错误:“无法读取未定义的属性 LoginExpired”
为什么会发生这种情况?我该如何解决?
我已将我的 CRA 项目升级为使用 React-scripts 3.2.0 当我运行时,npm run build我收到“正在创建优化的生产版本...”消息,但随后什么也没有发生,它就永远卡住了。
环境:
节点:v12.13.1
npm:6.12.1
项目详情:
typescript、scss 和 scss 模块
包.json
"dependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.13.4",
"@types/react": "^16.8.13",
"@types/react-dom": "16.8.4",
"classnames": "^2.2.5",
"mobx": "^3.6.2",
"mobx-react": "^4.4.3",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-scripts": "^3.2.0",
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.6.1",
"@typescript-eslint/parser": "^2.6.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"husky": "^3.0.9",
"lint-staged": "^9.4.2",
"prettier": "^1.19.1",
"typescript": "^3.2.4"
},
Run Code Online (Sandbox Code Playgroud)
tsconfig.json
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es2016", "dom"],
"sourceMap": true,
"allowJs": true, …Run Code Online (Sandbox Code Playgroud) 我想要一个通用字段过滤器,它将过滤器函数作为参数并使用它 filter
import {Injectable, Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'FieldsFilter'
})
@Injectable()
export class FieldsFilter implements PipeTransform {
transform(fields: any[], args: any[]): any {
return fields.filter(args[0]);//pass function to filter
}
}
Run Code Online (Sandbox Code Playgroud)
所以我可以在具有不同过滤功能的多个地方使用它.
如何通过过滤功能?
我想构建一个全新的应用程序,应该作为混合移动应用程序和桌面Web应用程序进行部署.
大多数情况下,两个应用程序的逻辑和用户界面非常相似.除了一些差异:
我想过将角度材料组件用于桌面,使用离子组件和移动导航,因为它们都是建立在角度之上.
当然,我的目标是尽可能多地共享代码,逻辑以及UI容器组件.
因此,我尝试在为桌面UI,移动UI,共享UI和逻辑创建单独的Angular模块时考虑构建项目的好方法:
一种选择是为两个应用程序提供一个核心模块,导入逻辑和共享UI模块.然后在为每个平台构建时在特定平台UI模块之间切换.在此选项中,特定于平台的UI组件将具有相同的selectors和@Inputs,但在呈现的UI中会有所不同.
第二个选项是为每个将导入逻辑模块和共享UI组件模块的平台应用程序提供单独的核心模块.
也许有人有这样做的经验,可以分享他对涵盖所有这些的最佳项目结构的看法?
或者我建议哪个项目结构更好?
只有纯CSS!!
我有一个div用作带有换行的弹性容器的元素,其中包含显示在 4 列中的元素。我需要显示该容器内的行之间的线。
我border-bottom为内部的每个 Flex 元素设置了属性,但这使得最后一行的行采用与该行中的元素一样多的元素。
有没有办法让容器中的最后一个元素显示该行直到行尾,而不使其宽度增加?
或者还有其他想法来处理这个问题吗?
注意:容器中的元素数量是动态的,所以我不知道最后一行有多少个元素。
html
<div id="container">
<div class="element">
<div class="content">
</div>
</div>
<div class="element">
<div class="content">
</div>
</div>
....
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
#container {
display: flex;
flex-wrap: wrap;
}
.element {
flex: 0 0 25%;
border-bottom: 1px solid green;
}
.content {
margin: 10px;
border: 3px solid green;
background-color: yellow;
height: 30px;
}
Run Code Online (Sandbox Code Playgroud)
演示小提琴:https://jsfiddle.net/sfhLw1dh/
谢谢你!
angular ×4
ionic2 ×2
android ×1
css ×1
flexbox ×1
html ×1
npm ×1
om ×1
react-native ×1
typescript ×1