- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为我的网站使用 YouTube 风格(喜欢/不喜欢)按钮。但我不知道该怎么做。在我的数据库中,我有两个表 posts(post_id、user_id、description)、likes(like_id、user_id、post_id、like_status)列值。我加入了两个表并通过 user_id 获取了值,我只是使用了 ngFor 的帖子并实现了 ngIf 条件,如果 user_id 位于 Likes 表中,它们工作正常。如果 user_id 不存在于 Likes 表中,我无法显示按钮,因为我不知道默认状态下按钮的确切条件。请任何人帮我解决这个问题。
我尝试过以下解决方案,但没有成功
*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == '喜欢')) “
*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike '))"
*ngIf="( (postLikes.length == 0) && (post.user_id !== like.user_id) && (post.post_id !== like.post_id) && (like.like_status != = '不像'))"
前两个 ngIf 条件工作正常,但最后一个 ngIf 条件不起作用。
<div class="container" style="width: 100%; height: 100%; ">
<div class="row" style=" margin: 1px; background-color: #fff; border: 2px solid #ada5a5; border-radius: 4px; ">
<!-- ngFor for posts -->
<div class="container" *ngFor="let post of posts; let i = index">
<div class="row" style="border-top: 2px solid #ada5a5;">
<div class="col-md-12 col-md-offset-0" style=" height: auto; ">
<h6> {{post.description}} </h6>
</div>
</div>
<!--ngFor for likes -->
<div class="container" style="border: 0px solid #ada5a5; ">
<div class="row">
<!--like button-->
<div class=" col-4">
<div *ngFor="let like of postLikes; let j = index ">
<div *ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'like'))">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>liked</p>
</div>
<div *ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))">
<button type="button" class="btn btn-danger" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Disliked</p>
</div>
<div
*ngIf="( (postLikes.length == 0) && (post.user_id != like.user_id) && (post.post_id != like.post_id) && (like.like_status != 'unlike'))">
<button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Default</p>
</div>
</div>
</div>
<!-- dislike button -->
<div class=" col-6">
<div class="" *ngFor="let like of postLikes">
<div *ngIf="((post.user_id==like.user_id) && (post.post_id==like.post_id) && (like.like_status=='like'))">
<button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Dislike</button>
</div>
<div
*ngIf="((post.user_id==like.user_id) && (post.post_id==like.post_id) && (like.like_status=='unlike'))">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Disliked</button>
</div>
</div>
</div>
</div>
</div><!--Like button ends-->
</div>
</div>
</div>
<TypeScript>
export class AppComponent {
title = 'my-app';
name = 'Angular';
posts: any[] =
[{"post_id":4,"user_id":2,"description":" Hi How are you ","created_date":"2019-01-28T12:30:49.000Z"},{"post_id":5,"user_id":2,"description":" Working a Fine ","created_date":"2019-01-28T12:31:20.000Z"},{"post_id":6,"user_id":2,"description":" Hi How are you ......","created_date":"2019-01-28T12:32:15.000Z"},{"post_id":7,"user_id":2,"description":" 4th test post","created_date":"2019-01-29T07:10:37.000Z"},{"post_id":9,"user_id":2,"description":" 5th test post","created_date":"2019-01-31T11:17:31.000Z"},{"post_id":10,"user_id":2,"description":" 6th test post","created_date":"2019-01-31T12:03:54.000Z"},{"post_id":11,"user_id":2,"description":" 7th post post","created_date":"2019-02-08T05:50:02.000Z"},{"post_id":12,"user_id":2,"description":" 8th test post ","created_date":"2019-02-08T06:08:01.000Z"}];
postLikes:any[] =[{"post_id":4,"user_id":2,"like_status":"unlike","like_id":10},{"post_id":5,"user_id":2,"like_status":"like","like_id":9},{"post_id":6,"user_id":2,"like_status":"like","like_id":8},{"post_id":7,"user_id":2,"like_status":"like","like_id":7},{"post_id":9,"user_id":2,"like_status":"like","like_id":11}]
post_id: any;
// likes: Like[];
like_id: number | null ;
like_status: string;
constructor(private http: HttpClient, private formBuilder: FormBuilder){
}
ngOnInit() { }
// Get user details from DB
getPosts(user_id) {
this.userService.getPosts(user_id).subscribe((data) => {
this.posts = data;
},
error => {
return console.log(error);
}
);
}
// join postlikes
getPostLikes(user_id) {
// debugger
this.userService.get_PostLikes(user_id).subscribe((results) => {
this.postLikes = results;
// console.log(results, 'results', this.postLikes, 'likes');
},
error => {
return console.log(error);
}
);
}
我希望 ngIf 条件在 user_id 不在 Likes 表中时显示默认按钮。我的 stackBlitz 链接 https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts
最佳答案
这不是完整的答案,我只是无法添加评论,所以......
首先,“postLikes === 0”总是返回False,因为“postLikes”是一个数组,但“0”是数字类型。
如果你想检查数组中是否有任何值,那么你可以检查它的长度
FE if(postLikes.length === 0) 或更简洁的方式 if(postLikes.length)
另请阅读“=”“==”“===”之间的区别并修复其他 ngIf 语句。
https://www.w3schools.com/js/js_operators.asp
据我了解,您正在获取特定用户喜欢或不喜欢的所有 post_id-s,因此循环遍历 postLikes 数组,如果没有该特定 post_id,则显示默认的喜欢和不喜欢按钮。
我还建议重构整个逻辑。
关于mysql - 在 ngFor 循环内使用 ngIf 条件实现类似 Angular 的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56037613/
学习SQL。有一个简单的带有字段标题的桌面游戏。我想根据标题进行搜索。如果我有一款名为 Age of Empires III: Dynasties 的游戏,并且我使用 LIKE 和参数 Age of
我正在尝试为以下数据结构创建镜头。我正在使用lens-family . data Tree = Tree { _text :: String, _subtrees ::
我发现很难理解这一点。比如说,在 Python 中,如果我想要一个根据用户输入在循环中修改的列表,我会有这样的内容: def do_something(): x = [] while(
我有一个像这样的 mysql 查询 SELECT group_name FROM t_groups WHERE group_name LIKE '%PCB%'; 结果是 group_name ----
我的数据库表中有超过一百万条记录。当我使用like时非常慢,当我使用match against时他们丢失了一些记录。 我创建帮助表: 标签列表 tag_id tag_name tag_rel_me
我在我的一个 Java 项目中使用 JXBrowser 来简单显示 googlemaps 网页,以便我可以在那里跟踪路线,但最近我想改进该项目,但我的问题是 JXBrowser 的许可证过期(只有一个
小问题:如何将 mysql_escape_string 变量包含在 like 子句中? "SELECT * FROM table WHERE name LIKE '%". %s . "%'" 或
我尝试使用几个jquery消息插件,例如alertify . 但我注意到的主要事情是系统消息框会停止后台功能,直到用户响应。其他插件没有此功能。 有没有办法将此功能添加到 jquery 插件中?可以扩
我是 Ruby 新手。我过去使用过 shell。我正在将 shell 程序转换为 ruby。我有以下命令 cmd="cat -n " + infile + " | grep '127.0.0.1
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
当我研究 Rust 时,我试图编写一个 Rust 函数来查看任何可迭代的字符串。 我最初的尝试是 fn example_1(iter: impl Iterator); fn example_2(ite
我必须在我的项目中使用代码拆分。但无论如何,第一次初始下载有一些代码。 现在我想向最终用户展示代码下载(.cache.html - 或其他代码拆分)的进度,例如 gmail 启动进度。 请你帮帮我。
我今天找到了一个错误,它最终是由我代码中的以下片段引起的(我试图在列表中仅过滤“PRIMARY KEY”约束): (filter #(= (% :constraint_type "PRIMARY KE
我正在尝试在关键字段上实现检查约束。关键字段由 3 个字符的前缀组成,然后附加数字字符(可以手动提供,但默认是从序列中获取整数值,然后将其转换为 nvarchar)。关键字段定义为 nvarhcar(
我正在尝试使用以下方式创建 List 实例: List listOne = new ArrayList(); List listTwo = new ArrayList(){}; List listTh
我过去曾为 iOS 开发过,最近转向了 mac 开发。我开始了一个“感受”事物的项目,但遇到了一个问题。我试图创建一个 NSTableView 来显示多个项目,包括一个标签、一个 2 UIImageV
我正在尝试编写一个查询,该查询将返回哪些主机缺少某个软件: Host Software A Title1 A
AFAIK,在三种情况下别名是可以的 仅限定符或符号不同的类型可以互为别名。 struct 或 union 类型可以为包含在其中的类型设置别名。 将 T* 转换为 char* 是可以的。 (不允许相反
\s 似乎不适用于 sed 's/[\s]\+//' tempfile 当它为工作时 sed 's/[ ]\+//' tempfile 我正在尝试删除由于命令而出现在每行开头的空格: nl -s ')
我正在使用 ocamlgraph 在 ocaml 中编写程序,并想知道是否要将其移植到 F# 我有哪些选择?谢谢。 最佳答案 QuickGraph .Net 最完整的图形库之一 关于F# 图形库(类似
我是一名优秀的程序员,十分优秀!