我正在寻找Angular的特定组件,该组件的工作方式类似于Bootstrap标签输入
谁能帮助我找到现成的组件或提供一些实现示例?我需要Angular 4
我试图创建一个Flexbox的响应式布局,让我交替两个方向row和row-reverse。
也许您可以通过一些图像更好地理解它(注意框的顺序):
并调整大小:
或者仍然:
你可以想象一个箭头穿过每个盒子,一定可以按照数字的顺序穿过1到8(就像一条蛇)。
如何使用 flexbox 实现它?
我想我可以使用orderCSS 属性,但我错过了一种动态设置它的方法。我不认为我可以用 JavaScript 实现这个结果,因为没有办法获得动态行的编号(除了丑陋的黑客,我想避免它们)。那么,你有什么想法吗?
谢谢你。
如果你想根据我的代码写一个例子,你可以使用这个:
.flexbox-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 380px;
height: 100px;
background: red;
margin: 5px;
font-family: sans-serif;
color: white;
text-align: center;
font-size: 2em;
line-height: 150%;
}Run Code Online (Sandbox Code Playgroud)
<div class="flexbox-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>Run Code Online (Sandbox Code Playgroud)
在使用 JavaScript 多年后,我遇到了一个我从未见过的错误。
我想计算两个Set之间的交集,所以我写道:
let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);
let intersection = [...a].filter(x => b.has(x));
console.log(intersection);Run Code Online (Sandbox Code Playgroud)
它有效,但我注意到我可以缩短上面的代码。由于 filter 方法只需要一个函数,不管它是如何定义的都会调用它,所以我写道:
let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);
let intersection = [...a].filter(b.has);
console.log(intersection);Run Code Online (Sandbox Code Playgroud)
在这种情况下,出乎意料的是,我收到以下错误:
未捕获的类型错误:方法 Set.prototype.has 调用了不兼容的接收器未定义
我还注意到,如果我绑定Set.prototype.add到变量,这不会发生:
let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);
let intersection = [...a].filter(Set.prototype.bind(b));
console.log(intersection);Run Code Online (Sandbox Code Playgroud)
我的问题是:为什么会发生?为什么b.has不是有效的回调?
我花了几个小时进行基本的 webpack 配置,但仍然无法使其工作。我的目标是在将 html 模板导入 JavaScript 文件时对其进行解析。它看起来像是一个常见的用例,但我的 webpack 配置或我的理解中应该有一些奇怪的东西。
\n\n我寻找了html-loader、 、 的配置html-webpack-plugin,posthtml并且pug阅读了他们的所有文档,但没有一个起作用。
\n\n\nPostHTML 是一个使用 JS 插件转换 HTML/XML 的工具。PostHTML 本身非常小。它仅包括 HTML 解析器、HTML 节点树 API 和节点树字符串生成器。
\n
因此,由于它是最有前途的,我用 posthtml 报告了我的尝试:
\n\n rules: [\n {\n test: /.html$/,\n use: [\n {\n loader: "html-loader",\n options: {\n minimize: true,\n interpolation: false\n }\n },\n {\n loader: "posthtml-loader"\n }\n ]\n }\n ]\nRun Code Online (Sandbox Code Playgroud)\n\n它不会返回任何错误,但看起来完全忽略了 posthtml-loader,因为执行import template from \'src/test.html\'\xc2\xa0I …
我正在尝试使用锚标记中的片段在页面内重定向。第一次它工作正常,但是当我手动向上滚动页面并再次按锚链接时,它不起作用。
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="home">Home</a>
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="about">About</a>
Run Code Online (Sandbox Code Playgroud)
我已将我的代码上传到StackBlitz
单击“关于”,您将看到页面滚动。手动向上滚动并再次按“关于”,这次不会发生任何事情。我期待您关于如何解决此问题的建议。
根据Angular Docs,当需要提供者时,您可以注入不同的对象。当我寻找这样做的充分理由时,我发现的唯一信息如下:
假设一个旧组件依赖于一个 OldLogger 类 [...] 但由于某种原因你不能更新旧组件来使用它。
我还是半信半疑。为什么在某些情况下,我无法更新旧组件?如果Component或Directive需要一个类,而我们注入另一个类,这并不危险?在哪些情况下使用provide和useClass必不可少?
这是界面的样子
export interface Patient {
doctors: [{
id: null,
gp: null,
}]
}
Run Code Online (Sandbox Code Playgroud)
这是我的元组
linkedDoctorShort: Array<any> = []; // will contain only the ID and GP
Run Code Online (Sandbox Code Playgroud)
我尝试了我在 StackOverflow 上找到的一些解决方案,但仍然出现相同的错误,尤其是当我想保存所有信息时:
onSave() {
const patientInfo: Patient = {
doctors: this.linkedDoctorShort,
};
Run Code Online (Sandbox Code Playgroud)
错误信息 :
类型“any[]”中缺少属性“0”,但类型“[{ id: string; gp:布尔值;}]'。
感谢您的帮助
我正在尝试重构我现有的应用程序以添加对 PassportJS 的支持,但它变得比预期的要困难。
我使用passport-jwt作为策略。所以我有
passport.use(new JwtStrategy(options, user.verify));
router.post(
'/login/jwt',
passport.authenticate('jwt', {session: false, failWithError: true})
);
Run Code Online (Sandbox Code Playgroud)
如果user.verify失败,它会调用(例如)
done(new Error(errors.BAD_REQUEST));
Run Code Online (Sandbox Code Playgroud)
但是我没有办法处理这个错误,无论我作为done回调的第一个参数传递什么,Passport 总是发送一个401 - 未经授权的响应。
这不是我所期望的,因为我的代码库中有许多错误处理程序,并且我想向客户端传达一个有意义的错误。
到目前为止,我在谷歌上搜索了很多,除了官方文档之外,我还打开了几个 SO 问题,但是这些解决方案中的任何一个都解决了我的问题。
例如,这个问题的一个常见解决方案是使用闭包来访问 req 和 res 对象(如上面的链接),但这不适用于我现有的应用程序。
有人能帮我吗?
下面的代码工作但是为了简化代码,我们如何使用三元运算符?
function fnOnChangeType() {
if (document.RequestHistoryForm.strMessageType.value=="All") {
document.getElementById("selectMessageView").disabled=false;
} else {
document.getElementById("selectMessageView").disabled=true;
}
}
function fnOnChangeView() {
if (document.RequestHistoryForm.strMessageView.value=="") {
document.getElementById("selectMessageType").disabled=false;
} else {
document.getElementById("selectMessageType").disabled=true;
}
}
Run Code Online (Sandbox Code Playgroud) 我收到了一个错误,我无法理解是什么导致了它.
这是生成错误的代码片段:
public class RssReader extends Activity {
private Button button1;
@Override
public void onCreate(Bundle savedInstanceState) {
button1 = (Button) findViewById(R.id.b1);
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
System.out.println("test");
}
});
super.onCreate(savedInstanceState);
setContentView(R.layout.rss_reader);
}
}
Run Code Online (Sandbox Code Playgroud)
这是我的rss_reader.xml档案:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="@+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
Run Code Online (Sandbox Code Playgroud)
上面的代码导致a NullPointerException,但我无法理解我正在访问的是什么空指针,因为我没有使用任何不安全的构造.完整的错误如下:
04-14 18:50:14.305: E/AndroidRuntime(443): FATAL EXCEPTION: main
04-14 18:50:14.305: E/AndroidRuntime(443): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.cris96.rssreader/com.cris96.rssreader.RssReader}: java.lang.NullPointerException
04-14 18:50:14.305: E/AndroidRuntime(443): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1647)
04-14 18:50:14.305: E/AndroidRuntime(443): at …Run Code Online (Sandbox Code Playgroud) 我正在开发一个有角度的项目。我有一个表文件,我想将每个元素与一个数据值进行比较(如果正确),我会做声明,否则我会做另一个比较,但是我的问题是,即使数据正确,它也总是会获取所有表,并且应该在其他很短的时间。请如何避免这种情况。
这是我的代码:
if (this.data) {
this.imgNotFoundText = '';
this.data.package.files.forEach(element => {
i++;
this.picture = '';
if (element.name == this.data.properties.Name) {
this.picture = 'picOne.png'
}
if (i == this.data.package.files.length && this.picture == '') {
this.picture = './../assets/img/notFound.jpg'
}
});
}
Run Code Online (Sandbox Code Playgroud) -每当我在数组中添加或删除元素时,都需要通过为每个项目放置一个元素来将数组中的元素转换为字符串。这是我的实现方式:
onSelect(event: MatOptionSelectionChange, service: string) {
let serviceList: string;
if(event.source.selected) {
this.servicesToToggle.push(service);
} else {
this.servicesToToggle = this.servicesToToggle.filter(item => item !== service);
}
this.servicesToToggle.forEach(element => {
if(element === undefined) {
return;
}
serviceList += '-' + element;
});
console.log(serviceList);
}
Run Code Online (Sandbox Code Playgroud)
问题是在undefined每个字符串的开头都包含了gets。像这样:
undefined-Hardware Service
undefined-Hardware Service-RFID Service
undefined-Hardware Service
undefined-Hardware Service-RFID Service
undefined-Hardware Service-RFID Service-QR Service
undefined-Hardware Service-RFID Service
undefined-RFID Service undefined
Run Code Online (Sandbox Code Playgroud)
你能帮我吗?
在Java中我有一个ResultSet对象,我用它来填充HashMap对象,这样:
rs = db.executeQuery(query);
rs.last();
rows = rs.getRow();
rs.beforeFirst();
String current;
String[] current_columns = new String[rows];
int x;
for(int i=0; i<n_col; i++){ //scroll columns
x=0;
while(rs.next()){ // scroll rows
current = rs.getString(columns[i]);
current_columns[x++] = current;
}
//a little output debug
System.out.print("hm.put("+columns[i]+", {");
for(int j=0; j<current_columns.length; j++)
System.out.print(current_columns[j]+" ");
System.out.println("});");
//end of output debug
hm.put(columns[i], current_columns);
rs.beforeFirst();
}
Run Code Online (Sandbox Code Playgroud)
输出调试打印:
hm.put(a,{a1 a2});
hm.put(b,{b1 b2});
所以,如果我写指令hm.get("a")它应该返回数组字符串{"a1","a2"},而如果我写hm.get("b")它应该返回我的数组string {"b1","b2"}.
但是,实际上,当我尝试获取值时,无论密钥如何,hashmap总是返回我放入的最后一个数组.所以如果我写下说明:
System.out.println(hm.get("a")[0]);
System.out.println(hm.get("b")[0]);
Run Code Online (Sandbox Code Playgroud)
它打印:
B1
B1
为什么hashmap有这种行为?问题出在哪儿 ?
javascript ×8
angular ×5
java ×2
typescript ×2
android ×1
arrays ×1
css ×1
flexbox ×1
hashmap ×1
html ×1
jwt ×1
node.js ×1
passport.js ×1
posthtml ×1
responsive ×1
webpack ×1