我正在尝试在应用程序中使用 Angular Material 库创建故事书nx,但我无法显示该库附带的样式。因此组件会呈现,但没有随之而来的样式。我已将组件添加到 Storybook 中,如下所示:
export default {
title: 'Buttons',
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [
MatButtonModule
],
}),
]
} as Meta<ButtonComponent>;
Run Code Online (Sandbox Code Playgroud)
此屏幕截图显示了主按钮,但没有获得正确的紫色样式。
我该如何将这样的内容导入 Storybook 以便主题得以体现?
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
Run Code Online (Sandbox Code Playgroud)
这也是一个nx应用程序,所以没有angular.jsonaproject.json和 a workspace.json。我尝试将主题添加到project.json下面,但不起作用,我认为它需要以某种方式直接传递到故事书而不是在project.json内部(这将适用于应用程序本身而不是故事书)?
"build": {
"options": {
"styles": [
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
],
"scripts": []
}
},
Run Code Online (Sandbox Code Playgroud)
使用Angular Material "13.2.3"、"@nrwl/storybook": "13.8.3",然后使用这些附加库:
"@storybook/addon-essentials": "6.5.0-alpha.41",
"@storybook/addon-knobs": "6.4.0",
"@storybook/addons": "^6.5.0-alpha.41",
"@storybook/angular": "6.5.0-alpha.41",
"@storybook/api": "6.5.0-alpha.41",
"@storybook/builder-webpack5": "6.5.0-alpha.41",
"@storybook/core-server": "6.5.0-alpha.41",
"@storybook/manager-webpack5": …Run Code Online (Sandbox Code Playgroud) angular-material angular-cli storybook nrwl-nx angular-storybook
我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.
我希望结合以下功能:
有一个显示"过滤"的按钮.没有输入.
用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.
然后,用户可以选择日期范围.
然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.
这个功能可以吗?当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.
这就是我想要的:
<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
Click Me
</button>
<ng-template #t let-date="date" let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</ng-template>
Run Code Online (Sandbox Code Playgroud)
谢谢
我正在尝试在 Angular 12 项目的 Javascript 中创建一个弹出窗口。我正在使用 Boostrap v5.0.1。当我尝试创建弹出窗口时,我似乎无法摆脱名称错误:
var exampleEl = document.getElementById(item.name + index);
var tooltip = new bootstrap.Popover(exampleEl, {
container: 'body',
animation: true
});
Run Code Online (Sandbox Code Playgroud)
打字稿告诉我"Can't find name bootstrap"。
我已将 bootrap.js 添加到我的 angular.json 文件中:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Run Code Online (Sandbox Code Playgroud)
根据文档,popper.js 包含在捆绑文件中。我没有使用 jQuery,也不想包含它。我还没有看到其他有类似问题的帖子,所以我一定只是忽略了一些小事情。有任何想法吗?
我有几种不同的情况,我试图在打字稿中的数组或对象上定义自制属性,但通常会收到错误:
“对象类型(或数组类型)上不存在属性 x”
例如,我在 Angular 中使用 typescript,并根据 Angular 类型定义文件定义了范围:
scope:ng.IScope
Run Code Online (Sandbox Code Playgroud)
但是当我尝试通过执行以下操作在范围上创建新属性时:
scope.anotherProperty = "string";
Run Code Online (Sandbox Code Playgroud)
我收到上面提到的错误。我知道我可以通过执行以下操作之一来解决该问题:
scope["anotherProperty"] = "string";
Run Code Online (Sandbox Code Playgroud)
或者
(<any>scope).anotherProperty = "string;
Run Code Online (Sandbox Code Playgroud)
另一个例子是当我的 d3 图中有这样的东西时:
function panZoomNode (node:any) {
for (var i = 0; i < renderedNodes.length; i++) {
if (node.id === renderedNodes[i].id) {
}
}
}
Run Code Online (Sandbox Code Playgroud)
理想情况下,我想将该 (node:any) 参数更改为:
(node:Object)
Run Code Online (Sandbox Code Playgroud)
但是当我这样做时,我收到一条错误消息“对象类型上不存在属性 id”。我知道我可以用上面提到的解决方案来纠正它,但这对我来说似乎有点草率。是否有更好的方法或最佳打字稿方法可以使数组和对象正确运行?
谢谢
I keep getting this tslint error and don't see what's wrong with the code. Does anybody see an issues with the jsdoc asteriks below not being aligned correctly:
/**
* @ngdoc directive
* @module ers.components.button
* @scope
* @transclude
* @data
* @binding
* @name ersButton
* @restrict E
* @constructor
*
* @description
*
* A button performs the defined action when the user clicks it.
*
* - Buttons can only consist of text and/or an icon.
* …Run Code Online (Sandbox Code Playgroud) 我有一个 D3 图表,允许用户单击按钮将其带到指定的节点。该按钮如下所示:
<button type="button" class="btn btn-primary" ng-click="ctrl.panGraph(9)">Go to End</button>
Run Code Online (Sandbox Code Playgroud)
此按钮将把用户从单击时在 svg 中的任何位置带到最后一个节点的 x 和 y 坐标,id 为 9。单击时调用此函数:
function panGraph (nodeId:any) {
svgWidth = parseInt(svg.style("width").replace(/px/, ""), 10);
svgHeight = parseInt(svg.style("height").replace(/px/, ""), 10);
for (var i = 0; i < renderedNodes.length; i++) {
if (nodeID === renderedNodes[i].id) {
ctrl.selectedNode = renderedNodes[i];
var translate = [svgWidth / 2 - renderedNodes[i].x, svgHeight / 2 - renderedNodes[i].y];
var scale = 1;
svg.transition().duration(4000).ease(d3.easeExpInOut).call(zoom.translate(translate).scale(scale).event);
}
}
}
Run Code Online (Sandbox Code Playgroud)
在上面的函数中,我拥有已在页面上渲染的所有渲染节点,一旦找到匹配的 id,我就会使用它的 x 和 y 坐标将指定节点置于 svg 中间的中心。一切都很好。 …
我的 Webpack 构建未将我的资源文件夹包含到 dist 构建中,这导致我的翻译文件永远不会被拾取,因此不会发生任何翻译...
文件结构:
dist
//I need my json files from src/resources here
src
app // holds all components
resources
locale-en-us.json
locale-fr-fr-json
locale-ru-ru.json
locale-zh-cn-json
webpack
webpack.common.js
webpack.server.js
Run Code Online (Sandbox Code Playgroud)
webback.server.js:
const { root } = require('./helpers');
const { AotPlugin } = require('@ngtools/webpack');
module.exports = {
entry: root('./src/main.server.ts'),
output: {
filename: 'server.js'
},
target: 'node'
};
Run Code Online (Sandbox Code Playgroud)
webpack.common.js
const { root } = require('./helpers');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
/**
* This is a common webpack config which is the base for all …Run Code Online (Sandbox Code Playgroud) 我正在为我的Angular组件编写一些量角器测试,当我尝试使用by.model选择输入元素时,不断收到错误"未知错误:未定义角度".
它奇怪,因为如果我这样做它工作正常和pases:
it('should have an input element for searching', () => {
var inputElement = element(by.model('searchText');
expect(inputElement).toBeDefined();
});
Run Code Online (Sandbox Code Playgroud)
但是当我尝试做这样的事情时,它会因角度未定义的错误而失败:
it('should filter the search text', () => {
var inputElement = element(by.model('searchText');
expect(inputElement).toBeDefined();
inputElement.clear()
inputElement.click();
inputElement.sendKeys('ICBC');
var tableLengthRow = element.all(by.css('.animate-repeat').count();
expect(tableLength).toBe(1);
});
Run Code Online (Sandbox Code Playgroud)
如果我替换这一行:
var inputElement = element(by.model('searchText');
Run Code Online (Sandbox Code Playgroud)
这一个:
var inputElement = element.all(by.tagName('input')).get(0);
Run Code Online (Sandbox Code Playgroud)
我把它留给测试通过.
有谁知道为什么上面的第一个测试使用by.model而不是第二个我实际点击该元素的测试?
然后我如何使用Webpack和npm在页面上定义角度?
谢谢
我一直使用Solana-labs / token-listGithub 上的存储库 ( https://github.com/solana-labs/token-list ) 将图像和名称上传到我通过控制台创建的令牌,这非常好且简单。但是,当我昨晚上传新的时,我注意到截至 6 月 20 日,该存储库是只读的。我想知道另一种方法是获取与我现有的 WL SPL 令牌关联的名称和图像,这样它就不会出现问题。在人们的钱包里,它似乎不为人知。
我总是使用以下命令在控制台中创建与糖果机一起使用的白名单令牌:
spl-token create-token --decimals 0
spl-token create-account <token-key>
spl-token mint <token-key> 5 <token-wallet>
然后将其用作 config.json 中的白名单密钥。
有没有办法在其他地方以同样的方式注册?自述文件中提到的两个当前选项(https://app.strataprotocol.com/launchpad/manual/new和https://token-creator-lac.vercel.app/)旨在帮助您创建一个新令牌尚未注册。但是如果我希望这个令牌成为糖果机中使用的白名单令牌,我可以走这条路吗?
我认为这是我目前为止的最后一个障碍。我只是想确认有人知道在实时铸币期间可以使用的另一条路线,以确保白名单按预期工作。一如既往地感谢任何帮助。
angularjs ×3
javascript ×3
angular ×2
d3.js ×2
jquery ×2
typescript ×2
webpack ×2
angular-cli ×1
angular5 ×1
bootstrap-5 ×1
end-to-end ×1
jsdoc ×1
localization ×1
metaplex ×1
nft ×1
ng-bootstrap ×1
npm ×1
nrwl-nx ×1
protractor ×1
solana ×1
solana-cli ×1
storybook ×1
svg ×1
tslint ×1
unit-testing ×1
webpack-2 ×1